container[name="carrousel__container"]{
    container: carrousel / inline-size;
}

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

    > header{
        padding-inline: 24px;
        
        > .carrousel__header__content{
            display: flex;
            flex-flow: row wrap;
            align-items: end;
            gap: 24px;

            > header{
                flex: 1;
                display: flex;
                flex-flow: row wrap;
                align-items: center;
                gap: 16px;

                > img{
                    border-radius: 8px;
                }

                > .carrousel__header__content__header__content{
                    flex: 1;
                    display: flex;
                    flex-flow: column wrap;
                    gap: 4px;

                    p{
                        font-size: var(--_font-size-h5);
                    }
                }
            }

            > .carrousel__header__content__actions{
                display: none;
            }
        }

        > .carrousel__header__actions{
            display: none;
        }
    }

    > .carrousel__content{
        inline-size: 100%;
        padding-inline: 24px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        display: flex;
        flex-flow: row nowrap;
        gap: 12px;

        > container[name="advertise__container"] {
            min-inline-size: 240px;
            /* scroll-snap-align: center; */
    
    
            > .advertise{
                border: 2.5px solid var(--_color-gray-3);
                border-radius: 12px;
            }
        }

        > *{
            scroll-snap-align: center;
        }
    }

    > .carrousel__content::-webkit-scrollbar{
        display: none;
    }
}

@container carrousel (min-width: 768px){
    .carrousel {
        padding-block: 48px;
        gap: 48px;

        > header {
            padding-inline: 48px;
        }
        
        > .carrousel__content{
            padding-inline: 48px;
            gap: 24px;

            > container[name="advertise__container"] {
                min-inline-size: 420px;
            }
        }
    }
        
}

@container carrousel (min-width: 1024px){
    .carrousel {
        > header {
            > .carrousel__header__content {
                > .carrousel__header__content__actions {
                    display: flex;
                    flex-flow: row wrap;
                    gap: 12px;

                    > button{
                        background: var(--_color-gray-2);
                        padding-inline: 12px;
                        padding-block: 12px;
                        aspect-ratio: 1 / 1;
                        border-radius: 50%;
                        transition: all .3s ease;

                        &:active{
                            background: var(--_color-gray-3);
                        }
                    }
                }
            }
        }
    }
}

@container carrousel (min-width: 1280px){
    .carrousel {
        > header {
            padding-inline: 96px;
        }

        > .carrousel__content{
            padding-inline: 96px;
        }
    }
}

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

        > .carrousel__content{
            padding-inline: calc(50% - 1248px/2);
        }
    }
}