/* ------------------------------ */
/* ------- Call-to-action ------- */
/* ------------------------------ */

.cta {
    position: relative;
}

.cta__image img {
    -o-object-position: right;
       object-position: right;
}

.cta__content {
    background-color: var(--brand-beige);
}

.cta__illustrations .icon {
    position: absolute;
}

.cta__illustrations .icon--dragonflies {
    top: var(--spacing-4);
}

.cta__illustrations .icon--bird {
    top: var(--spacing-5);
    right: -5px;
}

.section > div.section__cta:first-child {
    padding-top: var(--spacing-4);
}


/* ------------------------------ */
/* -------- Media Queries ------- */
/* ------------------------------ */

@media all and (min-width: 992px) {

    .cta__image {
        position: absolute;
        border: 1px solid var(--brand-beige);
    }

    .cta__image img {
        aspect-ratio: 740 / 936;
    }

    .cta__content__icon {
        display: none;
    }

    .cta__illustrations .icon--wheat {
        right: 33.333%;
    }

    .cta__illustrations .icon--wheat {
        bottom: -4px;
    }

    .cta__illustrations .icon--cow {
        bottom: calc(-1 * var(--spacing-5));
        right: calc(-1 * var(--spacing-1));
    }

}


@media all and (min-width: 1400px) {

    .section > div.section__cta {
        margin: var(--spacing-7) 0;
    }

    .cta__image {
        top: calc(-1 * var(--spacing-7));
        left: var(--spacing-6);
        height: calc(100% + 2 * var(--spacing-7));
    }

    .cta__illustrations .icon--dragonflies {
        left: -36px;
    }

}


@media all and (min-width: 1900px) {

    .cta__image {
        width: calc(40% - var(--spacing-6));
    }

    .cta__content {
        padding: var(--spacing-11) var(--spacing-9) var(--spacing-11) calc(40% + var(--spacing-6)); 
    }

}


@media all and (max-width: 1899.98px) and (min-width: 1600px) {

    .cta__image {
        width: calc(44% - var(--spacing-6));
    }

    .cta__content {
        padding: var(--spacing-11) var(--spacing-9) var(--spacing-11) calc(44% + var(--spacing-6)); 
    }

}


@media all and (max-width: 1599.98px) {

    .section > .section__cta {
        max-width: 100%;
    }

}


@media all and (max-width: 1599.98px) and (min-width: 1400px) {

    .section > .section__cta {
        padding-left: calc(var(--spacing-8) / 2);
        padding-right: calc(var(--spacing-8) / 2);
    }

    .cta__image {
        width: calc(48% - var(--spacing-6));
    }

    .cta__content {
        padding: var(--spacing-11) var(--spacing-7) var(--spacing-11) calc(48% + var(--spacing-6)); 
    }

    .cta__content h2 {
        padding-right: calc(var(--spacing-9) - var(--spacing-7));
    }

}


@media all and (max-width: 1399.98px) and (min-width: 1240px) {

    .section > .section__cta {
        margin: var(--spacing-5) 0 0;
        padding: 0 var(--spacing-5);
    }

    .cta__image {
        top: calc(-1 * var(--spacing-5));
        left: var(--spacing-5);
        height: calc(100% + 2 * var(--spacing-5));
        width: calc(50% - var(--spacing-5));
    }

    .cta__content {
        padding: var(--spacing-7) var(--spacing-6) var(--spacing-7) calc(50% + var(--spacing-5)); 
    }

    .cta__content h2 {
        padding-right: calc(var(--spacing-9) - var(--spacing-6));
    }

    .cta__illustrations .icon:not(.icon--wheat) {
        -webkit-transform: scale(.9);
            -ms-transform: scale(.9);
                transform: scale(.9);
    }

    .cta__illustrations .icon--dragonflies {
        left: -12px;
    }

}


@media all and (max-width: 1399.98px) and (min-width: 768px) {

    .section > .section__cta {
        padding: 0 var(--spacing-4);
    }

}


@media all and (max-width: 1399.98px) {

    .cta__illustrations .icon--dragonflies {
        -webkit-transform-origin: top left;
            -ms-transform-origin: top left;
                transform-origin: top left;
    }

    .cta__illustrations .icon--bird {
        -webkit-transform-origin: top right;
            -ms-transform-origin: top right;
                transform-origin: top right;
    }

    .cta__illustrations .icon--cow {
        -webkit-transform-origin: bottom right;
            -ms-transform-origin: bottom right;
                transform-origin: bottom right;
    }

    .cta__illustrations .icon--wheat {
        -webkit-transform-origin: bottom left;
            -ms-transform-origin: bottom left;
                transform-origin: bottom left;
    }

}


@media all and (max-width: 1239.98px) and (min-width: 992px) {

    .section > .section__cta {
        margin: var(--spacing-4) 0 0;
        padding-right: 0;
        padding-left: 0;
    }

    .cta__image {
        top: calc(-1 * var(--spacing-4));
        left: var(--spacing-4);
        height: calc(100% + 2 * var(--spacing-4));
        width: calc(50% - var(--spacing-4));
    }

    .cta__content {
        padding: var(--spacing-7) var(--spacing-5) var(--spacing-7) calc(50% + var(--spacing-5));
    }

    .cta__content h2 {
        padding-right: calc(var(--spacing-9) - var(--spacing-5));
    }

    .cta__illustrations .icon:not(.icon--wheat):not(.icon--bird) {
        right: 10px;
        -webkit-transform: scale(.75);
            -ms-transform: scale(.75);
                transform: scale(.75);
    }

    .cta__illustrations .icon--bird {
        -webkit-transform: scale(.825);
            -ms-transform: scale(.825);
                transform: scale(.825);
    }

    .cta__illustrations .icon--dragonflies {
        left: 5px;
    }

    .cta__illustrations .icon--bird {
        right: 0;
    }

}


@media all and (max-width: 991.98px) {

    .cta__illustrations .icon--dragonflies, .cta__illustrations .icon--bird {
        display: none;
    }

    .cta__image {
        position: relative;
        width: 100%;
    }

    .cta__image .picture_container--cover, .cta__image .picture_container--cover picture {
        position: relative;
        left: unset;
        top: unset;
    }

    .cta__image img {
        aspect-ratio: 768 / 485;
    }

    .cta__content {
        position: relative;
    }

    .cta__content__icon {
        position: absolute;
    }

    .cta__content__icon.icon--dragonflies {
        -webkit-transform-origin: top left;
            -ms-transform-origin: top left;
                transform-origin: top left;
    }
    
    .cta__content__icon.icon--bird {
        -webkit-transform-origin: top right;
            -ms-transform-origin: top right;
                transform-origin: top right;
    }


}


@media all and (max-width: 991.98px) and (min-width: 768px) {

    .cta__content {
        padding: var(--spacing-7);
    }

    .cta__content__icon.icon--dragonflies {
        left: -12px;
        top: 10px;
    }
    
    .cta__content__icon.icon--bird {
        top: 25px;
        right: -5px;
    }

    .cta__content__icon.icon--bird,  .cta__content__icon.icon--dragonflies, .cta__illustrations .icon--cow {
        -webkit-transform: scale(.825);
            -ms-transform: scale(.825);
                transform: scale(.825);
    }

    .cta__illustrations .icon--wheat {
        right: 40%;
        bottom: 0;
    }

    .cta__illustrations .icon--cow {
        right: 10px;
        bottom: calc(-1 * var(--spacing-3));
    }

}


@media all and (max-width: 767.98px) {

    .section > .section__cta {
        padding: 0;
    }

    .cta__content__icon.icon--dragonflies, .cta__content__icon.icon--bird {
        display: none;
    }

    .cta__illustrations .icon--wheat {
        bottom: -2px;
    }

}


@media all and (max-width: 767.98px) and (min-width: 576px) {

    .cta__content {
        padding: var(--spacing-5) var(--spacing-3);
    }

    .cta__illustrations .icon--wheat {
        -webkit-transform: scale(.7);
            -ms-transform: scale(.7);
                transform: scale(.7);
        right: 48%;
    }

    .cta__illustrations .icon--cow {
        right: 10px;
        bottom: calc(-1 * var(--spacing-3));
        -webkit-transform: scale(.7);
            -ms-transform: scale(.7);
                transform: scale(.7);
    }

}


@media all and (max-width: 575.98px) {

    .cta__illustrations .icon--cow {
        display: none;
    }

    .cta__illustrations .icon--wheat {
        right: 0;
    }

}


@media all and (max-width: 575.98px) and (min-width: 390px) {

    .cta__content {
        padding: var(--spacing-4) var(--spacing-3) var(--spacing-7);
    }

}


@media all and (max-width: 389.98px) {

    .cta__content {
        padding: var(--spacing-3) var(--spacing-2) var(--spacing-8);
    }

    .cta__illustrations .icon--wheat {
        right: 0;
    }

}


@media all and (max-width: 349.98px) {

    .cta__content {
        padding: var(--spacing-3) var(--spacing-1) var(--spacing-8);
    }

}