/* ReactKing — restrained advertising placements. */

.ad-placement {
    width: 100%;
    min-height: 5.625rem;
    margin: var(--spacing-50) 0;
    overflow: hidden;
}

.ad-placement-horizontal {
    display: none;
    width: 45.5rem;
    min-height: 5.625rem;
    align-items: center;
    justify-content: center;
}

.lobby-ad {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    justify-self: center;
    margin: 0;
}

.ad-placement-rail {
    position: absolute;
    top: 11rem;
    left: calc(100% + var(--spacing-20));
    display: none;
    width: min(18rem, calc((100vw - var(--page-max-width)) / 2 - var(--spacing-30)));
    min-height: 40rem;
    margin: 0;
}

.profile-ad-rail {
    top: 7.5rem;
}

.content-end-ad {
    margin-top: var(--spacing-100);
}

@media (min-width: 1500px) {
    .ad-placement-horizontal {
        display: flex;
    }
}

@media (min-width: 1760px) {
    .ad-placement-rail {
        display: block;
    }
}