section:has(> .coupons-accordion__container){
    padding-block: 40px;
}

.coupons-accordion__container{
    container: coupons-accordion / inline-size;
}

.coupons-accordion{
    padding-inline: 24px;

    > .coupons-accordion__thumbnail{
        position: relative;
        inline-size: 100%;
        block-size: 256px;
        padding-inline: 12px;
        padding-block: 12px;
        display: flex;

        > .coupons-accordion__thumbnail__background{
            position: absolute;
            top: 0;
            left: 0;
            inline-size: 100%;
            border-radius: 12px;
            object-fit: cover;
            z-index: -1;
        }

        > .coupons-accordion__thumbnail__thumbnail{
            margin-block: auto 0;
            border-radius: 8px;
        }
    }

    > .coupons-accordion__content{
        > hr{
            border: 1px solid var(--_color-gray-2);
        }
    }
}

@container coupons-accordion (min-width: 600px){
    .coupons-accordion{
        display: flex;
        flex-flow: row-reverse wrap;
        align-items: stretch;
        gap: 48px;

        &[reversed]{
            flex-flow: row wrap;
        }

        > .coupons-accordion__thumbnail{
            position: sticky;
            top: calc(20px + 158px);
            flex: 1;
            block-size: unset;
            max-block-size: 275px;

            > .coupons-accordion__thumbnail__background{
                block-size: 100%;
            }
        }

        > .coupons-accordion__content{
            inline-size: calc(50% - 48px/2);
            max-inline-size: 420px;

            &[coupons="1"]{
                align-content: center;
            }
        }
    }
}

@container coupons-accordion (min-width: 768px){
    .coupons-accordion{
        padding-inline: 48px;

        > .coupons-accordion__thumbnail{
            position: sticky;
            top: calc(20px + 92px);
        }
    }
}

@container coupons-accordion (min-width: 1280px){
    .coupons-accordion{
        padding-inline: 96px;
        gap: 84px;

        > .coupons-accordion__thumbnail{
            flex: 1.1;
            padding-inline: 16px;
            padding-block: 16px;
            block-size: 400px;
            max-block-size: 400px;
            
            > .coupons-accordion__thumbnail__thumbnail{
                inline-size: 128px;
                block-size: 128px;
            }
        }

        > .coupons-accordion__content{
            inline-size: auto;
            align-content: center;
            max-inline-size: unset;
            flex: 1;
        }
    }
}

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