/* ==============================
    GOOGLE ADS
    ============================== */

.ad-slot {
    width: 100%;
    margin: 32px auto;
    display: flex;
    justify-content: center;
}

.ad-slot__placeholder {
    width: 100%;
    min-height: inherit;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;

    padding: 12px;
    box-sizing: border-box;

    border: 2px dashed #c9c9c9;
    border-radius: 8px;

    background:
        repeating-linear-gradient(-45deg,
            #f5f5f5,
            #f5f5f5 10px,
            #eeeeee 10px,
            #eeeeee 20px);

    color: #777;
    text-align: center;
}

.ad-slot__title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.ad-slot__position {
    font-size: 11px;
    letter-spacing: 0.08em;
}

.ad-slot__dimensions {
    font-size: 12px;
    font-weight: 600;
}

/* 728 × 90 */
.ad-slot--leaderboard {
    max-width: 728px;
    min-height: 90px;
}

/* 970 × 250 */
.ad-slot--billboard {
    max-width: 970px;
    min-height: 250px;
}

/* 300 × 250 */
.ad-slot--rectangle {
    max-width: 300px;
    min-height: 250px;
}

/* 300 × 600 */
.ad-slot--half-page {
    max-width: 300px;
    min-height: 600px;
}

.ad-dimensions--mobile {
    display: none;
}

/* ==============================
   MOBILE
============================== */

@media (max-width: 600px) {

    .ad-slot--leaderboard,
    .ad-slot--billboard {
        max-width: 320px;
        min-height: 100px;
    }

    .ad-slot--rectangle {
        max-width: 300px;
        min-height: 250px;
    }

    .ad-slot--half-page {
        max-width: 300px;
        min-height: 600px;
    }

    .ad-slot--leaderboard .ad-dimensions--desktop,
    .ad-slot--billboard .ad-dimensions--desktop {
        display: none;
    }

    .ad-slot--leaderboard .ad-dimensions--mobile,
    .ad-slot--billboard .ad-dimensions--mobile {
        display: inline;
    }
}