.psm-banner-slot {
    width: 100%;
    margin: clamp(18px, 2vw, 32px) auto;
}

.psm-banner-slot .psm-banner-item {
    width: 100%;
}

.psm-banner-slot a,
.psm-banner-slot picture,
.psm-banner-slot img {
    display: block;
    width: 100%;
}

.psm-banner-slot img {
    height: auto;
    border-radius: 0;
}

.psm-banner-slot--fullwidth {
    max-width: 1290px;
}

.psm-banner-slot--leaderboard {
    max-width: 970px;
}

.psm-banner-slot--incontent,
.psm-banner-slot--single-incontent {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.psm-banner-slot--skyscraper {
    max-width: 160px;
}

.psm-banner-slot--incontent .psm-banner-item,
.psm-banner-slot--single-incontent .psm-banner-item,
.psm-banner-slot--incontent a,
.psm-banner-slot--single-incontent a,
.psm-banner-slot--incontent picture,
.psm-banner-slot--single-incontent picture,
.psm-banner-slot--incontent img,
.psm-banner-slot--single-incontent img {
    width: auto;
    max-width: 100%;
}

.psm-banner-slot.skyscraper-banner {
    margin-top: 0;
    margin-bottom: 0;
}

.psm-banner-slot.skyscraper-left,
.psm-banner-slot.skyscraper-right {
    max-width: 160px;
}

@media (min-width: 1661px) {
    .psm-banner-slot.skyscraper-banner {
        --psm-skyscraper-width: 160px;
        --psm-skyscraper-gap: 24px;
        --psm-skyscraper-top: 140px;
        position: fixed;
        top: var(--psm-skyscraper-top);
        width: var(--psm-skyscraper-width);
        max-width: var(--psm-skyscraper-width);
        margin: 0;
        z-index: 90;
    }

    .psm-banner-slot--single_skyscraper_left,
    .psm-banner-slot--single_skyscraper_right {
        --psm-skyscraper-top: 180px;
    }

    .psm-banner-slot.skyscraper-left {
        left: max(16px, calc(50vw - 645px - var(--psm-skyscraper-width) - var(--psm-skyscraper-gap)));
    }

    .psm-banner-slot.skyscraper-right {
        right: max(16px, calc(50vw - 645px - var(--psm-skyscraper-width) - var(--psm-skyscraper-gap)));
    }

    body.admin-bar .psm-banner-slot.skyscraper-banner {
        top: calc(var(--psm-skyscraper-top) + 32px);
    }
}

body.psm-banner-preview-desktop .psm-banner-slot.skyscraper-banner {
    --psm-skyscraper-width: 160px;
    --psm-skyscraper-gap: 24px;
    --psm-skyscraper-top: 140px;
    position: fixed;
    top: var(--psm-skyscraper-top);
    width: var(--psm-skyscraper-width);
    max-width: var(--psm-skyscraper-width);
    margin: 0;
    z-index: 90;
}

body.psm-banner-preview-desktop .psm-banner-slot--single_skyscraper_left,
body.psm-banner-preview-desktop .psm-banner-slot--single_skyscraper_right {
    --psm-skyscraper-top: 180px;
}

body.psm-banner-preview-desktop .psm-banner-slot.skyscraper-left {
    left: max(16px, calc(50vw - 645px - var(--psm-skyscraper-width) - var(--psm-skyscraper-gap)));
}

body.psm-banner-preview-desktop .psm-banner-slot.skyscraper-right {
    right: max(16px, calc(50vw - 645px - var(--psm-skyscraper-width) - var(--psm-skyscraper-gap)));
}

body.admin-bar.psm-banner-preview-desktop .psm-banner-slot.skyscraper-banner {
    top: calc(var(--psm-skyscraper-top) + 32px);
}

@media (max-width: 1660px) {
    .psm-banner-slot--home_skyscraper_left,
    .psm-banner-slot--home_skyscraper_right,
    .psm-banner-slot--category_skyscraper_left,
    .psm-banner-slot--category_skyscraper_right,
    .psm-banner-slot--single_skyscraper_left,
    .psm-banner-slot--single_skyscraper_right {
        display: none;
    }
}

body.psm-banner-preview-desktop .psm-banner-slot--home_skyscraper_left,
body.psm-banner-preview-desktop .psm-banner-slot--home_skyscraper_right,
body.psm-banner-preview-desktop .psm-banner-slot--category_skyscraper_left,
body.psm-banner-preview-desktop .psm-banner-slot--category_skyscraper_right,
body.psm-banner-preview-desktop .psm-banner-slot--single_skyscraper_left,
body.psm-banner-preview-desktop .psm-banner-slot--single_skyscraper_right {
    display: block;
}

body.psm-banner-preview-mobile .psm-banner-slot--home_skyscraper_left,
body.psm-banner-preview-mobile .psm-banner-slot--home_skyscraper_right,
body.psm-banner-preview-mobile .psm-banner-slot--category_skyscraper_left,
body.psm-banner-preview-mobile .psm-banner-slot--category_skyscraper_right,
body.psm-banner-preview-mobile .psm-banner-slot--single_skyscraper_left,
body.psm-banner-preview-mobile .psm-banner-slot--single_skyscraper_right {
    display: none;
}

@media (max-width: 767px) {
    .psm-banner-slot {
        margin: 18px auto;
    }

    .psm-banner-slot--fullwidth,
    .psm-banner-slot--leaderboard,
    .psm-banner-slot--skyscraper {
        max-width: min(320px, 100%);
    }

    .psm-banner-slot--incontent,
    .psm-banner-slot--single-incontent {
        width: fit-content;
        max-width: min(320px, 100%);
    }

    .psm-banner-slot.skyscraper-banner {
        max-width: min(320px, 100%);
    }
}