.heading__container{
    container: heading / inline-size;
    position: relative;
    z-index: 2;
}

.heading{
    padding-inline: 24px;
    padding-block: 48px 0;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 48px;

    &[inline-full]{
        inline-size: 100% !important;
    }

    &[skeleton] {
        > span{
            position: relative;
            display: block;
            min-block-size: 1.87ch;
            background: var(--_color-gray-2);
            border-radius: 8px;
            overflow: hidden;
            flex: 1;

            &::before{
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                transform: translateX(-100%);
                background-image: linear-gradient(
                    90deg, 
                    rgba(142, 142, 145, 0) 0, 
                    rgba(142, 142, 145, 0.1) 20%, 
                    rgba(142, 142, 145, 0.2) 60%, 
                    rgba(142, 142, 145, 0)
                );
                animation: shimmer 3s infinite;
            }
        }
    }

    :is(h1, h2, h3, h4, h5, h6) {
        /* flex: 2; */
        > span{
            font-family: var(--_font-family-regular);
            color: var(--_color-gray-1);
            font-size: .6em;
        }
    }

    /* > *{
        flex: 1;
    } */
}

@container heading (min-width: 768px){
    .heading{
        inline-size: 80%;
        padding-inline: 48px;
    }
}

@container heading (min-width: 1280px){
    .heading{
        inline-size: 55%;
        padding-inline: 96px;
    }
}

@container heading (min-width: 1440px){
    .heading{
        inline-size: 100%;
        padding-inline: calc(50% - 1248px / 2);
    }
}