@media (min-width: 981px) {
    .ee-site-main .ee-creation-page .ee-creation-hero {
        background: linear-gradient(90deg, #143831, #236657);
    }

    .ee-site-main .ee-creation-page .ee-creation-hero::after {
        background: linear-gradient(90deg, rgba(14, 43, 38, .94), rgba(14, 43, 38, .9) 56%, rgba(14, 43, 38, .48) 78%, rgba(14, 43, 38, .12));
    }

    .ee-site-main .ee-creation-page .ee-creation-hero-photo {
        inset: 32px max(32px, calc((100vw - 1180px) / 2)) 32px auto;
        width: min(340px, 30vw);
        height: auto;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, .18);
        border-radius: 8px;
        background: #12342e;
        box-shadow: 0 24px 60px rgba(4, 24, 22, .28);
    }

    .ee-site-main .ee-creation-page .ee-creation-hero-photo img {
        width: 100%;
        height: 100%;
        object-fit: contain !important;
        object-position: center !important;
        background: #12342e;
    }

    .ee-site-main .ee-creation-page .ee-creation-hero-inner > * {
        max-width: 610px;
    }

    .ee-magic-landing-page .ee-magic-directory-card__featured,
    .ee-magic-landing-page .ee-magic-legacy-feature figure,
    .ee-magic-landing-page .ee-magic-legacy-shows figure {
        background: #0b0a08;
    }

    .ee-magic-landing-page .ee-magic-directory-card__featured img,
    .ee-magic-landing-page .ee-magic-legacy-feature figure img,
    .ee-magic-landing-page .ee-magic-legacy-shows figure img {
        object-fit: contain !important;
        object-position: center !important;
        background: #0b0a08;
    }
}

@media (min-width: 981px) and (max-width: 1180px) {
    .ee-site-main .ee-creation-page .ee-creation-hero-photo {
        right: 24px;
        width: min(310px, 28vw);
    }

    .ee-site-main .ee-creation-page .ee-creation-hero-inner > * {
        max-width: min(58vw, 610px);
    }
}

@media (max-width: 760px) {
    .ee-magic-secondary-page .ee-magic-secondary-hero figure,
    .ee-magic-secondary-page .ee-magic-secondary-section figure,
    .ee-magic-secondary-page .ee-magic-secondary-card-grid figure {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .ee-magic-secondary-page .ee-magic-secondary-hero figure img,
    .ee-magic-secondary-page .ee-magic-secondary-section figure img,
    .ee-magic-secondary-page .ee-magic-secondary-card-grid figure img {
        object-fit: contain;
        background: #0b0a08;
    }
}