.ww-gw-hours {
    --container-padding-block: 3.125rem;
    --container-grid-areas: 'intro' 'hours' 'skip';

    --container-grid-row-gap: 2rem;

    --heading-font-size: 2rem;
    --subheading-font-size: 0.8rem;
    --subheading-margin-block: 1rem 3rem;
    --intro-width: min(100%, 54rem);
    --intro-font-size: 1rem;

    --hours-border-radius: 2rem;
    --hours-padding: 2rem;

    --hours-heading-font-size: 1.6875rem;
    --hours-content-font-size: 1rem;
    --hours-heading-margin-block: 0 1rem;
    --hours-content-margin-block: 0 1rem;
    --hours-section-margin-block: 0 3rem;

    --skip-heading-font-size: 1.5rem;
    --skip-heading-text-decoration: none;
    --skip-heading-margin-block: 0 1.5rem;

    --skip-content-margin-block: 0 1rem;
    --skip-content-font-size: 1rem;
    --skip-section-margin-block: 0 2rem;
    --skip-margin-inline: 0.75rem;

    --skip-btn-display: flex;
    --skip-btn-place-self: center;

    background-color: var(--colors-deep-blue);
    color: var(--colors-white);

    padding-block: var(--container-padding-block);

    h2 {
        font-family: var(--fonts-montserrat);
        font-weight: 900;
        font-size: var(--heading-font-size);
        line-height: 110%;
        letter-spacing: 0%;
        text-align: center;
        text-transform: uppercase;
        text-wrap: balance;
    }

    .container--full {
        display: grid;
        grid-template-areas: var(--container-grid-areas);
        column-gap: var(--container-grid-column-gap);
        row-gap: var(--container-grid-row-gap);
    }
}

.ww-gw-hours-subheading {
    margin-block: var(--subheading-margin-block);

    font-family: var(--fonts-montserrat);
    font-weight: 700;
    font-size: var(--subheading-font-size);
    line-height: 110%;
    letter-spacing: 0%;
    text-align: center;
    text-transform: uppercase;
}

.ww-gw-hours-heading {
    grid-area: intro;
}

.ww-gw-hours-intro {
    width: var(--intro-width);
    margin-inline: auto;
    text-align: center;

    font-family: var(--fonts-montserrat);

    font-weight: 500;
    font-style: Medium;
    font-size: var(--intro-font-size);
    line-height: 100%;
    letter-spacing: 0%;
}

.ww-gw-hours-content {
    grid-area: hours;
    font-family: var(--fonts-montserrat);
    padding: var(--hours-padding);

    border: 1px solid var(--colors-white);
    border-radius: var(--hours-border-radius);

    h3 {
        font-weight: 900;
        font-size: var(--hours-heading-font-size);
        margin-block: var(--hours-heading-margin-block);

        line-height: 100%;
        letter-spacing: 0%;
    }

    p {
        font-weight: normal;
        font-size: var(--hours-content-font-size);
        line-height: 100%;
        letter-spacing: 0%;
        margin-block: var(--hours-content-margin-block);

        span {
            font-weight: 700;
        }
    }

    p:has(+ h3) {
        margin-block: var(--hours-section-margin-block);
    }
}


.ww-gw-hours-skip {
    grid-area: skip;
    margin-inline: var(--skip-margin-inline);
    scroll-margin-block: var(--skip-scroll-margin-block);

    h3 {
        font-weight: 900;
        font-size: var(--skip-heading-font-size);
        text-align: var(--skip-heading-text-align);
        margin-block: var(--skip-heading-margin-block);

        line-height: 100%;
        letter-spacing: 0%;
        text-decoration: var(--skip-heading-text-decoration);
        text-decoration-color: color(from currentColor srgb r g b / 0.75);
    }

    p {
        font-size: var(--skip-content-font-size);
        line-height: 100%;
        letter-spacing: 0%;
        margin-block: var(--skip-content-margin-block);

        span {
            font-weight: 700;
        }
    }

    p:has(+ a) {
        margin-block: var(--skip-section-margin-block);
    }
}

.ww-gw-hours-skip-btn {
    display: var(--skip-btn-display);
    place-self: var(--skip-btn-place-self);
}

@media (width >=768px) {
    .ww-gw-hours {
        --container-grid-areas: 'intro intro' 'hours skip';
        --container-grid-column-gap: 2rem;
        --container-grid-row-gap: 3rem;

        --intro-font-size: 1.25rem;

        --container-padding-block: 7.5rem;

        --heading-font-size: 3.375rem;
        --subheading-font-size: 1.125rem;

        --hours-padding: 1.5rem;
        --hours-border-radius: 1.5rem;

        --hours-heading-font-size: 2rem;
        --hours-heading-margin-block: 0 1rem;
        --hours-content-font-size: 1.25rem;
        --hours-content-margin-block: 0 1rem;
        --hours-section-margin-block: 0 3rem;

        --skip-heading-font-size: 2rem;
        --skip-heading-text-align: start;
        --skip-heading-text-decoration: underline;

        --skip-heading-margin-block: 0 1rem;

        --skip-margin-inline: 0rem;

        --skip-content-font-size: 1.25rem;

        --skip-content-margin-block: 0 1rem;
        --skip-section-margin-block: 0 2rem;

        --skip-btn-display: inline-flex;
        --skip-btn-place-self: start;

        --skip-scroll-margin-block: 4rem 0rem;
    }
}

@media (width >=1024px) {
    .ww-gw-hours {
        --container-grid-column-gap: 6rem;

        --hours-padding: 3.5rem;
        --hours-border-radius: 3.5rem;
    }
}