/*
Regra da exibição das publicidades na lista de anúncios:

Banner native list (semelhante ao card)
    4 colunas > após 7 anúncios (banner é o oitavo card)
    3 colunas > após 8 anúncios (banner é o nono card)
    2 colunas > após 7 anúncios (banner é oitavo card)
    1 coluna > segue a regra do mobile.
*/

:root {
    --row-native__4-columns-first: 2; /*Irá aparecer na segunda linha de cards*/
    --row-native__3-columns-first: 3;
    --row-native__2-columns-first: 4;
    --row-native__4-columns-second: 4; /*A segunda ocorrencia irá aparecer na quarta linha de cards*/
    --row-native__3-columns-second: 6;
    --row-native__2-columns-second: 8;
    /*Mobile*/
    --row-native__1-column-first: 8;
    --row-native__1-column-second: 16;

    --column-native__4-columns: 4 / 5;  /*Irá aparecer na quarta posição de coluna*/
    --column-native__3-columns: 3 / 4;
    --column-native__2-columns: 2 / 3;
    /*Mobile*/
    --column-native__1-column: 1 / 2;
}

.ad-native-container{
    height:100%;
    display:flex;
    align-items:center;
    justify-content: center;
    border-radius:12px;
    border:1px solid #EFE9E5;
    background: #FAF7F5;
    overflow: hidden;
}

#div-publicidade-native-1,
#div-publicidade-native-2 {
    width: 100%;
}

.blast__container {
    margin: unset;
}

.leaderboard__container {
    margin: var(--ids_spacing_8x) 0;
}

.arroba__container {
    display: none;
}

.midia-display__native {
    width: auto;
    height: auto;
}

.midia-display__native.first {
    grid-column: var(--column-native__4-columns);
    grid-row: var(--row-native__4-columns-first);
}

.second {
    grid-column: var(--column-native__4-columns);
    grid-row: var(--row-native__4-columns-second);
}

.cards-grid.filter-active > .midia-display__native.first {
    grid-column: var(--column-native__3-columns);
    grid-row: var(--row-native__3-columns-first);
}

.cards-grid.filter-active > .midia-display__native.second {
    grid-column: var(--column-native__3-columns);
    grid-row: var(--row-native__3-columns-second);
}

@media (max-width: 1280px) {
    .midia-display__native.first {
        grid-column: var(--column-native__3-columns);
        grid-row: var(--row-native__3-columns-first);
    }
    .cards-grid.filter-active > .midia-display__native.first {
        grid-column: var(--column-native__2-columns);
        grid-row: var(--row-native__2-columns-first);
    }
    .midia-display__native.second {
        grid-column: var(--column-native__3-columns);
        grid-row: var(--row-native__3-columns-second);
    }
    .cards-grid.filter-active > .midia-display__native.second {
        grid-column: var(--column-native__2-columns);
        grid-row: var(--row-native__2-columns-second)
    }
}

@media (max-width: 1024px) {
    .midia-display__native.first {
        grid-column: var(--column-native__2-columns);
        grid-row: var(--row-native__2-columns-first);
    }
    .cards-grid.filter-active > .midia-display__native.first {
        grid-column: var(--column-native__1-column);
        grid-row: var(--row-native__1-column-first);
    }
    .midia-display__native.second {
        grid-column: var(--column-native__2-columns);
        grid-row: var(--row-native__2-columns-second);
    }
    .cards-grid.filter-active > .midia-display__native.second {
        grid-column: var(--column-native__1-column);
        grid-row: var(--row-native__1-column-second);
    }
}

@media (max-width: 768px) {
    .midia-display__native.first {
        grid-column: var(--column-native__1-column);
        grid-row: var(--row-native__1-column-first);
    }
    .midia-display__native.second {
        grid-column: var(--column-native__1-column);
        grid-row: var(--row-native__1-column-second);
    }
    .arroba__container {
        display: flex;
    }
}