header {
    background-color: #E7F2F2;
    padding: 5vmax 0;
    font-size: 1.4rem;
    line-height: 1;

    & h2 {
        font-size: clamp(3rem, 4.5vw, 3rem);
    }

    & h3 {
        font-size: 2rem;
    }

    @media(max-width: 567px) {
        --nav-height: 80px;
        height: calc(100vh - var(--nav-height));
    }

}

.info-card {
    & svg {
        max-width: 5rem;
        color: #BEC6E3;
    }

}

section {
    margin: 5rem 0;

}

section.ui {
    margin: 10vw 0;
    /* box-shadow: inset 0 4vw 0 0 #fff, inset 0 -4vw 0 0 #fff; */
    background-color: var(--site-primary-color);

    @media(max-width: 1023px) {
        box-shadow: inset 0 -16vw 0 0 #fff;
    }

    & .ui-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        transform: translateY(-4vw);

        @media(max-width: 1023px) {
            position: static;
        }
    }


}