/*
    Block: Simple Hero Banner
    Note: Selectors must start with .block-simple-hero-banner
*/

@layer blocks {
    .block-simple-hero-banner .main-wrapper:where(.wide) {
        padding-inline: 1.25rem;
    }

    .block-simple-hero-banner #scrollto {
        position: relative;
        top: var(--header-height);
    }

    .block-simple-hero-banner .text-content {
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
        max-width: var(--text-width);
    }

    :where(body.single-post) .block-simple-hero-banner .text-content {
        --gap: 3.125rem;
    }
    
    .block-simple-hero-banner .post-meta-wrapper {
        margin-top: 3.125rem;
    }

    .block-simple-hero-banner .post-meta-wrapper .post__date {
        font-size: var(--fs-11-16);
        padding: .75rem 1.125rem;
        border: 1px solid var(--c-lighter-grey);
        border-radius: 100vw;
    }

    .block-simple-hero-banner .side-content {
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
        max-width: 24.1875rem;
    }

    .block-simple-hero-banner .side-content .description {
        margin: 0;
        padding-right: 1.625rem;
    }

    .block-simple-hero-banner .post__image {
        margin-top: 5rem;
        width: 100%;
        aspect-ratio: 2.4138;
        object-fit: cover;
    }

    @media screen and (width <= 620px) {
        .block-simple-hero-banner .main-wrapper {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            -webkit-box-align: start;
                -ms-flex-align: start;
                    align-items: flex-start;
            gap: 2.5rem;
            padding-inline: .5625rem;
        }

        .block-simple-hero-banner .text-content {
            --gap: 1.5625rem;
        }

        .block-simple-hero-banner .post-meta-wrapper {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            -webkit-box-align: start;
                -ms-flex-align: start;
                    align-items: flex-start;
            margin-top: 1.5625rem;
            gap: 2.5rem;
        }

        .block-simple-hero-banner .post-meta-wrapper .post-meta {
            gap: .75rem;
        }

        .block-simple-hero-banner .post-meta-wrapper .post__date {
            padding: .5rem .75rem;
        }

        .block-simple-hero-banner .side-content .description {
            padding-right: 3.0625rem;
        }

        .block-simple-hero-banner .post__image {
            aspect-ratio: .75;
        }
    }
}