@layer components {
    .banner{
        --column-gap: calc(var(--spacer) * 5);
        color: white;
        background-color: rgba(var(--color-blue));
        padding-block: calc(var(--spacer) * 4);

        @media(max-width: 768px){
            padding-bottom: 1px;
            padding-top: calc(var(--spacer) * 2);
        }

        .mobile-hide{
            @media(max-width: 768px){
                display: none;
            }
        }

        .desktop-hide{
            display: none;

            @media(max-width: 768px){
                display: block;
            }
        }

        .survey-content h2{
            font-size: 2.25em;
            margin-bottom: calc(var(--spacer) * 1.5);
            line-height: 1.25;
            position: relative;
            margin-top: 155px;

            @media(max-width: 768px){
                font-size: 1.5em;
                margin-top: 0;

                + p{
                    margin-bottom: calc(var(--spacer) * 2);
                }
            }
        }
    }
}