:root {
    --default-cta-horizontal-margin-bottom: 6rem;
    --default-cta-horizontal-gap: 3rem;
    --default-cta-horizontal-background-color: rgb(var(--color-lime));
    --default-cta-horizontal-padding: 2rem;

    --default-cta-horizontal-image-width: 270px;
    --default-cta-horizontal-image-height: 236px;
    --default-cta-horizontal-image-height-padding: 17px;

    --default-cta-horizontal-text-gap: 1.5rem;

    --default-cta-horizontal-title-color: rgb(var(--color-dark-green));
    --default-cta-horizontal-title-font-size: var(--font-size-h2);
    --default-cta-horizontal-title-line-height: var(--line-height-small);
    --default-cta-horizontal-title-font-weight: 700;
    --default-cta-horizontal-title-font-family: var(--font-brand);

    --default-cta-horizontal-caption-color: rgb(var(--color-dark-green));
    --default-cta-horizontal-caption-font-size: var(--font-size-body);

    --default-cta-horizontal-button-height: 44px;
    --default-cta-horizontal-button-padding: 10px 16px;
    --default-cta-horizontal-button-background-color: rgb(var(--color-dark-green));
    --default-cta-horizontal-button-color: rgb(var(--color-lime));
    --default-cta-horizontal-button-font-family: var(--font-brand);
    --default-cta-horizontal-button-font-size: var(--font-size-body);
    --default-cta-horizontal-button-line-height: var(--line-height-large);
    --default-cta-horizontal-button-hover-filter: brightness(1.2);
    --default-cta-horizontal-button-focus-outline: 2px solid rgb(var(--color-dark-green));
    --default-cta-horizontal-button-focus-outline-offset: 2px;
}

.cta-horizontal {
    display: flex;
    align-items: center;
    gap: var(--cta-horizontal-gap, var(--default-cta-horizontal-gap));
    background-color: var(--cta-horizontal-background-color, var(--default-cta-horizontal-background-color));
    padding: var(--cta-horizontal-padding, var(--default-cta-horizontal-padding));
    border: 1px solid rgb(var(--color-lime));
}

.cta-horizontal__image {
    flex: 0 0 auto;
    width: var(--cta-horizontal-image-width, var(--default-cta-horizontal-image-width));
    height: var(--cta-horizontal-image-height, var(--default-cta-horizontal-image-height));
    padding: var(--default-cta-horizontal-image-height-padding) 0;
    object-fit: cover;
}

.cta-horizontal__content {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    gap: var(--cta-horizontal-gap, var(--default-cta-horizontal-gap));
    min-width: 0;
}

.cta-horizontal__text {
    display: flex;
    flex-direction: column;
    gap: var(--cta-horizontal-text-gap, var(--default-cta-horizontal-text-gap));
}

.cta-horizontal__title {
    margin: 0;
    color: var(--cta-horizontal-title-color, var(--default-cta-horizontal-title-color));
    font-family: var(--cta-horizontal-title-font-family, var(--default-cta-horizontal-title-font-family));
    font-weight: var(--cta-horizontal-title-font-weight, var(--default-cta-horizontal-title-font-weight));
    font-size: var(--cta-horizontal-title-font-size, var(--default-cta-horizontal-title-font-size));
    line-height: var(--cta-horizontal-title-line-height, var(--default-cta-horizontal-title-line-height));
}

.cta-horizontal__caption {
    margin: 0;
    color: var(--cta-horizontal-caption-color, var(--default-cta-horizontal-caption-color));
    font-size: var(--cta-horizontal-caption-font-size, var(--default-cta-horizontal-caption-font-size));
}

.cta-horizontal__button {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    height: var(--cta-horizontal-button-height, var(--default-cta-horizontal-button-height));
    padding: var(--cta-horizontal-button-padding, var(--default-cta-horizontal-button-padding));
    background-color: var(--cta-horizontal-button-background-color, var(--default-cta-horizontal-button-background-color));
    color: var(--cta-horizontal-button-color, var(--default-cta-horizontal-button-color));
    font-family: var(--cta-horizontal-button-font-family, var(--default-cta-horizontal-button-font-family));
    font-size: var(--cta-horizontal-button-font-size, var(--default-cta-horizontal-button-font-size));
    line-height: var(--cta-horizontal-button-line-height, var(--default-cta-horizontal-button-line-height));
    text-decoration: none;
    transition: filter .2s;
}

.cta-horizontal__button:hover,
.cta-horizontal__button:focus-visible {
    color: var(--cta-horizontal-button-color, var(--default-cta-horizontal-button-color));
    filter: var(--cta-horizontal-button-hover-filter, var(--default-cta-horizontal-button-hover-filter));
}

.cta-horizontal__button:focus-visible {
    outline: var(--cta-horizontal-button-focus-outline, var(--default-cta-horizontal-button-focus-outline));
    outline-offset: var(--cta-horizontal-button-focus-outline-offset, var(--default-cta-horizontal-button-focus-outline-offset));
}

@media print, screen and (max-width: 768px) {
    .cta-horizontal {
        flex-direction: column;
        align-items: stretch;
        gap: var(--cta-horizontal-gap-mobile, var(--default-cta-horizontal-text-gap));
    }

    .cta-horizontal__image {
        order: 3;
        width: 100%;
        height: auto;
    }

    .cta-horizontal__content {
        order: 1;
        gap: var(--cta-horizontal-gap-mobile, var(--default-cta-horizontal-text-gap));
    }
}