/* =========================================
   TEMPORARY DISCOVERY PLACEHOLDER
========================================= */

.media-placeholder {

    width: min(
        560px,
        75vw
    );

    aspect-ratio: 16 / 10;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 16px;

    background:
        radial-gradient(
            circle at center,
            rgba(180, 192, 215, 0.035),
            transparent 55%
        );

    color:
        rgba(235, 239, 255, 0.55);

    border-radius:
        calc(var(--media-radius) - 4px);
}


.placeholder-star {

    font-size: 22px;

    font-weight: 300;

    color:
        rgba(200, 210, 230, 0.65);

    text-shadow:
        0 0 24px
        rgba(200, 210, 230, 0.20);

    animation:
        placeholderPulse
        3s ease-in-out infinite;
}


.placeholder-text {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 5px;

    font-family:
        var(--font-ui);

    letter-spacing:
        0.12em;

    text-transform:
        lowercase;
}


.placeholder-text span {

    font-size: 10px;

    color:
        rgba(235, 239, 255, 0.46);
}


.placeholder-text small {

    font-size: 8px;

    color:
        rgba(235, 239, 255, 0.22);

    letter-spacing:
        0.08em;
}


@keyframes placeholderPulse {

    0%,
    100% {
        opacity: 0.55;
        transform: scale(1);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.06);
    }
}


@media (max-width: 600px) {

    .media-placeholder {

        width:
            calc(100vw - 70px);

        aspect-ratio:
            4 / 3;
    }
}