/* ------------------------------ */
/* ---------- Solutions --------- */
/* ------------------------------ */

.section__solutions  {
    background-color: var(--brand-cold-grey);
    padding-bottom: var(--spacing-12);
}

.solution__logo {
    position: relative;
    aspect-ratio: 456 / 300;
    background-color: var(--brand-blue-screen);
}

.solution__content {
    background-color: var(--brand-white);
}

.solution__content h3 {
    margin-bottom: 0;
}

.solution__content .buttons .button, .solution__content .button--arrow a {
    margin-top: 0;
}

.solution__buttons.buttons .button:not(.button--small) {
    margin-right: 0;
}


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

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

    .solutions > .solution:nth-child(n+4) {
        margin-top: var(--spacing-8);
    }

    .solution__content h3 {
        min-height: 144px;
    }

}


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

    .solutions {
        margin: calc(-1 * var(--spacing-3));
    }
      
    .solutions > .solution {
        padding: var(--spacing-3);
    }

    .solution__logo, .solution__content {
        padding: var(--spacing-7);
    }

}


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

    .solutions {
        margin: -12px;
    }
      
    .solutions > .solution {
        padding: 12px;
    }

    .solution__logo, .solution__content {
        padding: var(--spacing-6);
    }

}


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

    .solution__logo, .solution__content {
        padding: var(--spacing-5);
    }

}


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

    .solutions {
        margin: calc(-1 * var(--spacing-2));
    }
      
    .solutions > .solution {
        padding: var(--spacing-2);
    }

}


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

    .solutions > .solution:nth-child(n+3) {
        margin-top: var(--spacing-7);
    }

    .solution__logo, .solution__content {
        padding: var(--spacing-6);
    }

    .solution__content h3 {
        min-height: 94px;
    }

}


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

    .solutions {
        margin: -8px;
    }
      
    .solutions > .solution {
        padding: 8px;
    }

    .solutions > .solution:nth-child(n+3) {
        margin-top: var(--spacing-7);
    }

    .solution__logo, .solution__content {
        padding: var(--spacing-5);
    }

    .solution__content h3 {
        min-height: 94px;
    }

}


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

    .solutions > .solution:nth-child(n+2) {
        margin-top: var(--spacing-7);
    }

    .solution__logo, .solution__content {
        padding: var(--spacing-6);
    }

}


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

    .solutions > .solution:nth-child(n+2) {
        margin-top: var(--spacing-7);
    }

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

    .solution__content h3 {
        margin-bottom: var(--spacing-6);
    }

    .solution__logo {
        aspect-ratio: unset;
        padding: var(--spacing-12) var(--spacing-5);
    }

}