container[name="header__container"]{
    container: header / inline-size;
}

.header{
    padding-block: 48px 40px;
    display: flex;
    flex-flow: column wrap;
    gap: 36px;

    &[skeleton]{
        > .header__thumbnail{
            > img{
                position: relative;

                &::before{
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    inline-size: 100%;
                    block-size: 100%;
                    background: var(--_color-gray-2);
                }
            }
        }
    }

    > header{
        padding-inline: 36px;
        display: flex;
        flex-flow: column wrap;
        align-items: center;
        gap: 24px;

        .header__header__content{
            text-align: center;
            display: flex;
            flex-flow: column wrap;
            justify-content: center;
            gap: 12px;
        }
    }

    > .header__thumbnail{
        inline-size: 100%;
        overflow-x: hidden;

        > img{
            block-size: 240px;
            object-fit: cover;
            object-position: -24px;
        }
    }
}

@container header (min-width: 540px){
    .header{
        padding-inline: 24px 0;
        flex-flow: row wrap;
        align-items: center;

        > header{
            padding-inline: 0;
            flex: 1;
        }

        > .header__thumbnail{
            inline-size: auto;
            flex: 2;

            > img{
                object-fit: cover;
                object-position: 0;
                border-radius: 12px;
            }
        }
    }
}

@container header (min-width: 768px){
    .header{
        padding-block: 48px;
        padding-inline: 48px 0;
        gap: 60px;

        > .header__thumbnail{
            > img{
                block-size: 360px;
                border-radius: 16px;
            }
        }
    }
}

@container header (min-width: 1280px){
    .header{
        padding-inline: 96px 0;
        gap: 96px;

        > header{
            max-inline-size: 320px;
        }

        > .header__thumbnail{
            > img{
                inline-size: 100%;
                block-size: 480px;
                border-radius: 24px;
            }
        }
    }
}

@container header (min-width: 1440px){
    .header{
        padding-inline: 144px 0;
    }
}

@container header (min-width: 1640px){
    .header{
        padding-inline: calc(50% - 1140px/2) calc(50% - 1284px/2);
        
        > .header__thumbnail{
            > img{
                border-radius: 24px;
            }
        }
    }
}