.coupon__container{
    container: coupon / inline-size;
}

.coupon{
    background: var(--_color-white);
    padding-block: 24px;
    border-radius: 12px;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    gap: 12px;

    &:not([accordion]){
        padding-inline: 24px;
        border: 2.5px solid var(--_color-gray-2);
        text-align: center;
    }

    > header{
        display: flex;
        flex-flow: column wrap;
        justify-content: space-between;
        gap: 12px;

        > .coupon__header__thumbnail{
            inline-size: 72px;
            aspect-ratio: 1 / 1;
            border-radius: 12px;
            background: var(--_color-orange-3);
            align-content: center;

            > img{
                border-radius: 8px;
            }
        }

        > p{
            display: none;
        }
    }

    > .coupon__content{
        inline-size: 100%;
        display: flex;
        flex-flow: column wrap;
        gap: 8px;

        > :is(header, summary){
            position: relative;
            inline-size: 100%;
            display: flex;
            flex-flow: column wrap;
            align-self: start;
            gap: 4px;

            > h6{
                color: var(--_color-orange-2);
            }
        }

        > summary{
            cursor: pointer;
            outline-color: transparent;

            > :is(h4, h6){
                inline-size: calc(100% - 24px - 12px);
            }

            > img{
                position: absolute;
                top: 50%;
                right: 0;
                translate: 0 -50%;
                transition: all .3s ease;
            }
        }

        &[open] > summary{
            ~ .coupon__content__content{
                padding-block: 8px 0;
            }

            > img{
                rotate: -180deg;
            }
        }

        > .coupon__content__content{
            inline-size: 100%;
            display: flex;
            flex-flow: column wrap;
            gap: 12px;

            > p{
                > button{
                    font-family: var(--_font-family-medium);
                }
            }
        }

        > .coupon__content__actions{
            inline-size: 100%;
            padding-block: 12px 0;
            display: flex;
            flex-flow: column wrap;
            gap: 8px;

            > *{
                inline-size: 100%;
            }
        }
    }
}

.carrousel__content{
    > .coupon__container{
        min-inline-size: 240px;
    }
}

@container coupon (min-width: 420px){
    .coupon{
        text-align: start !important;
        flex-flow: row wrap;
        align-items: stretch;
        gap: 24px;

        > header{
            text-align: center;
            align-items: center;

            > .coupon__header__thumbnail{
                inline-size: 140px;

                > img{
                    inline-size: 60%;
                    block-size: 60%;
                }
            }

            > .coupon__header__thumbnail[icon]{
                > img{
                    inline-size: 48px;
                    block-size: 48px;
                }
            }

            > p{
                display: block;
                inline-size: 80%;
                padding-block: 6px;
            }
        }

        &[accordion] > .coupon__content{
            > .coupon__content__content{
                > p:last-of-type{
                    display: block;
                }
            }

            .coupon__content__actions{
                flex-flow: row wrap;

                > *{
                    inline-size: auto;
                }
            }
        }

        > .coupon__content{
            flex: 1;

            > .coupon__content__content{
                > p:last-of-type{
                    display: none;
                }
            }

            > .coupon__content__actions{
                margin-block: auto 0;

                > *{
                    padding-inline: 16px;
                }
            }
        }
    }
}

@media (min-width: 1024px){
    .carrousel__content{
        > .coupon__container{
            min-inline-size: 420px;
        }
    }

    .coupon {
        > header {
            > .coupon__header__thumbnail {
                > img {
                    inline-size: 100%;
                    block-size: 100%;
                }
            }
        }
    }
}