@layer page {
    #hero {
        h1 {
            span {
                display: block;
                font-size: var(--step-1);
                font-weight: 400;
                font-family: var(--font-hand);
                letter-spacing: 0;
                margin-block-start: 1em;
                position: relative;
                text-shadow: none;
                &::before {
                    content: "*";
                    display: inline-block;
                    position: relative;
                    inset-block-start: -0.25em;
                }
            }
            min-width: 0;
            flex-grow: 1;
        }

        figure {
            min-width: min(20rem, 100%);
            max-width: 22rem;
            margin-inline: auto;
        }
    }

    #blog-posts {
        display: flex;
        flex-direction: column;
        gap: var(--space-3xl);
    }

    .blog-post {
        container-type: inline-size;
        display: flex;
        flex-direction: column;
        row-gap: var(--space-m);
        column-gap: var(--space-xl);
        border-block-start: 1px solid var(--color-gray-200);

        @media (width > 60rem) {
            display: grid;
            align-items: start;
            grid-template-rows: auto auto 1fr;
            grid-template-columns: 1.5fr 2fr;
            grid-template-areas: 'img title'
                                'img text'
                                'img more';   
            &:nth-child(even) {
                grid-template-columns: 2fr 1.5fr;
                grid-template-areas: 'title img'
                                    'text img'
                                    'more img';  
            }   
        }

        .blog-post__title {
           line-height: 1.3;
        }

        .blog-post__image {
            will-change: filter;
            grid-area: img;
            inline-size: 100%;

            
            img {
                aspect-ratio: 4.5/3;
                inline-size: 100%;
                block-size: 100%;
                object-fit: cover;
                border-radius: 1.5cqi;
                filter: drop-shadow(-0.75rem 0.75rem 0 hsla(0, 0%, 0%, 0.15));
            }
            
            @container (width > 60rem) {
                rotate: -1.5deg;

                .blog-post:nth-child(even) & {
                    rotate: 1.5deg;
                }
            }
            
        }
        
        
        .blog-post__excerpt {
            grid-area: text;
        }

        h2 {
            font-size: var(--step-2);
            grid-area: title;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        .btn {
            grid-area: more;
            inline-size: fit-content;
        }
    }
}