:root {
    --brand-blue: #03b1cd;
    --brand-pink: #ed1f79;
    --brand-yellow: #F9C028;
}

h1, h2, h3, h4 {
    margin: 0 !important;
}

#banner {
    background-size: cover;
    background-position: center;
    background-color: var(--brand-blue);

    .headline-container {
        padding: 171px 0 81px 31px;

        @media (min-width: 1024px) {
            padding: 359px 0 381px 85px;
        }
    }

    .headline {
        color: #FFF;
        font-family: kulturistaLight;
        font-size: 41px;
        font-style: normal;
        font-weight: 300;
        line-height: 84%;
        letter-spacing: 0.3px;
        text-transform: uppercase;

        @media (min-width: 1024px) {
            font-size: 142px;
            line-height: 100%;
            letter-spacing: 1px;
        }
    } /* headline */

    .subheader {
        margin-top: 8px;
        color: #FFF;
        font-family: brandonRegular;
        font-size: 1rem;
        font-style: normal;
        line-height: 86%;
        letter-spacing: 1px;
        text-transform: uppercase;

        @media (min-width: 1024px) {
            margin-top: 0;
            font-size: 1.25rem;
            line-height: 110%;
        }
    }
} /* banner */

.main {
    display: flex;
    flex-direction: column;

    @media (min-width: 1024px) {
        flex-direction: row;
    }

    .panel {

        @media (min-width: 1024px) {
            flex: 1;
        }
    }

    .info-panel {

        .inner-container {
            padding: 35px 43px;

            @media (min-width: 1024px) {
                padding: 69px 86px;
            }
        }

        .intro {
            margin: 0;
            color: #000;
            font-family: brandonRegular;
            font-size: 1.25rem;
            font-style: normal;
            line-height: 185%;
        }

        .contact-methods {
            margin-top: 36px;
            display: flex;
            flex-direction: column;
            gap: 36px;

            .contact-method {

                .title {
                    color: #000;
                    font-family: brandonRegular;
                    font-size: 0.75rem;
                    font-style: normal;
                    line-height: 183.333%;
                    letter-spacing: 1px;
                    text-transform: uppercase;
                }

                .body {
                    margin-top: 6px;
                    color: #000;
                    font-family: kulturistaBold;
                    font-size: 1.25rem;
                    font-style: normal;
                    line-height: 105%;
                    text-transform: uppercase;

                    a {
                        color: #000;
                        transition: all 200ms ease-in;

                        &:hover {
                            color: var(--brand-blue);
                        }
                    }
                }
            }
        } /* contact-methods */
    } /* info-panel */

    .map-panel {

        gmp-map {
            width: 100%;
            aspect-ratio: 1.0;
            object-fit: cover;

            @media (min-width: 1024px) {
                aspect-ratio: 0.89;
            }
        }
    }
} /* main */

footer {
    margin-top: 0;
}