/* ===========================
   Hide all ad variants first
=========================== */

.ad-top-320,
.ad-top-728,
.ad-bottom-320,
.ad-bottom-728 {
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow: hidden;
}

/* In-feed is always shown */
.ad-infeed-300 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow: hidden;
    margin: 12px 0;
}


/* ===========================
   Mobile Phones
   0px - 767px
=========================== */

@media (max-width: 767px) {

    .ad-top-320,
    .ad-bottom-320 {
        display: flex;
    }

}


/* ===========================
   Tablets & Desktop
   768px and above
=========================== */

@media (min-width: 768px) {

    .ad-top-728,
    .ad-bottom-728 {
        display: flex;
    }

}