section#ctas{
    & .container{
        padding: 0;
    }
}
.meso-cta {
    width: var(--base-width);
    max-width: var(--base-width);
    border-left-width: 0;
    border-left-style: solid;
    border-radius: var(--base-border-radius);
    & .cta-text {
        width: var(--base-width);
        max-width: var(--base-width);
        padding: calc(var(--base-sm-padding));
        & strong{
            font-size: calc(var(--base-font-size) * 1.5);
            line-height: calc(var(--base-font-size) * 2);
        }
    }
    & .cta-image{
        display: none;
        min-height: 338px;
        & img{
            width: var(--base-width);
            height: 338px;
            min-height: 338px;
            object-fit: cover;
            object-position: top;
        }
    }
    &.light{
        background-color: var(--primary-light) !important;
        border-color: var(--cta-mid);
        & .btn-primary{
            background-color: var(--cta-mid);
        }
    }
    &.mid{
        background-color: var(--cta-mid) !important;
        border-color: var(--primary-dark);
        & .cta-text{
            color: var(--white-color);
        }
    }
    &.dark{
        background-color: var(--primary-dark) !important;
        border-color: var(--secondary-light-green);
        & .cta-text{
            color: var(--white-color);
        }
        & .btn-primary{
            background-color: var(--secondary-light-green);
        }
    }
}

@media (min-width: 375px) { }

@media (min-width: 425px) {
    .meso-cta {
        border-left-width: 26px;
        & .cta-text {
            padding: calc(var(--base-sm-padding) * 2);
        }
    }
}

/* 2. LARGE MOBILE (480px+) */
@media (min-width: 480px) { }

/* 3. TABLET (768px+) */
@media (min-width: 768px) {
    .meso-cta {
        width: var(--base-width);
        max-width: var(--base-width);
        border-left-width: 26px;
        border-left-style: solid;
        border-radius: var(--base-border-radius);
        & .cta-text {
            padding: calc(var(--base-sm-padding) * 2);
            max-width: calc(var(--base-width) / 100 * 65);
            & strong{
                font-size: calc(var(--base-font-size) * 1.5);
                line-height: calc(var(--base-font-size) * 2);
            }
        }
        & .cta-image{
            display: none;
            min-height: 338px;
            & img{
                width: var(--base-width);
                height: 338px;
                min-height: 338px;
                object-fit: cover;
                object-position: top;
            }
        }
        &.light{
            background-color: var(--primary-light) !important;
            border-color: var(--cta-mid);
            & .btn-primary{
                background-color: var(--cta-mid);
            }
        }
        &.mid{
            background-color: var(--cta-mid) !important;
            border-color: var(--primary-dark);
            & .cta-text{
                color: var(--white-color);
            }
        }
        &.dark{
            border-color: var(--secondary-light-green);
            & .cta-text{
                max-width: calc(var(--base-width) / 100 * 60);
                color: var(--white-color);
            }
            & .btn-primary{
                background-color: var(--secondary-light-green);
            }
        }
    }
}

/* 4. DESKTOP (1024px+) */
@media (min-width: 1024px) {
    .meso-cta {
        & .cta-text {
            padding: calc(var(--base-sm-padding) * 4);
            max-width: calc(var(--base-width) / 100 * 65);
        }
    }
}

/* 5. LARGE DESKTOP (1200px+) */
@media (min-width: 1200px) {
    .meso-cta {
        & .cta-text {
            max-width: calc(var(--base-width));
        }
    }
}

/* 6. EXTRA LARGE (1440px+) */
@media (min-width: 1440px) {}