section{
    &:has(> container[name="advertise__container"]){
        padding-block: 40px;
    }

    &:has(> container[name="advertise__container"] > .advertise[inline-full]){
        padding-block: 0;
    }
}

container[name="advertise__container"] {
    container: advertise / inline-size;
    inline-size: 100%;
    display: flex;
    justify-content: center;

    &:has(.advertise .adsbygoogle:is([data-ad-status="unfilled"], [data-side-rail-status="displayed"])){
        display: none !important;
    }
}

.advertise {
    padding-inline: 24px;
    padding-block: 24px;
    text-align: center;
    border-radius: 12px;
    background: var(--_color-gray-2);
    min-inline-size: 320px;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;

    &[inline-full]{
        min-inline-size: auto;
        inline-size: 100%;
        flex-flow: row wrap;
    }

    &:has(.adsbygoogle:not([style*="width: 0px;"], [style*="height: 0px;"])){
        display: flex;
    }

    &:has(.adsbygoogle:is([data-ad-status="unfilled"])){
        display: none !important;
    }

    > header {
        border-radius: 12px;
        aspect-ratio: 1 / 1;
        background: var(--_color-white);
        border: 1px solid var(--_color-black);
        text-align: center;
        align-content: center;

        > :is(h5, h6) {
            padding-inline: 1ch;
        }
    }

    > .advertise__content{
        overflow-x: auto;
        overflow-y: hidden;
        display: flex;
        flex-flow: column wrap;
        align-items: center;
        gap: 24px;

        &:has(> .adsbygoogle) {
            width: 100% !important;
            height: 120px !important;
            min-width: 120px !important;
        }

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

        > img {
            inline-size: 100%;
            object-fit: contain;
        }

        > .adsbygoogle{
            /* width: 100% !important;
            height: 120px !important; */
            inline-size: 100%;
            block-size: 100%;

            &[data-side-rail-status="displayed"]{
                display: none !important;
            }

            &.adsbygoogle-noablate{
                display: block !important;
            }
        }
    }
}

@container advertise (max-width: 360px){
    .advertise{
        &[inline-full]{
            flex-flow: column wrap;
    
            > .advertise__content{
                flex: 1;
            }
        }
    }
}

@container advertise (min-width: 425px) {
    .advertise {
        flex-flow: row wrap;

        .advertise__content {
            flex-flow: row wrap;
            flex: 1;

            p {
                text-align: left;
                flex: 1;
            }
        }
    }
}

@container advertise (min-width: 600px) {
    .advertise {
        padding-inline: 48px;
        padding-block: 24px;
        gap: 24px;

        > .advertise__content {
            gap: 72px;
        }
    }
}

@media (min-width: 768px){
    section:has(> container[name="advertise__container"]){
        padding-block: 48px;
    }
}

@container advertise (min-width: 768px){
    .advertise{
        min-inline-size: 600px;
    }
}

@container advertise (min-width: 1280px){
    .advertise{
        &[inline-full]{
            padding-inline: 96px;
        }
    }
}

@container advertise (min-width: 1440px){
    .advertise{
        &[inline-full]{
            padding-inline: calc(50% - 1248px/2);
        }
    }
}