@layer utilities {

    /* Media primitives */
    .eyecatcher,
    .thumbnail,
    .screenshot,
    .carrousel {
        border-radius: var(--radius-corner);
        background-color: var(--color-media-placeholder-bg);
        object-fit: cover;
    }

    .u-image {
        display: block;
        max-width: 100%;
        object-fit: cover;
        background-color: var(--color-media-placeholder-bg);
        background-image: linear-gradient(90deg, transparent, var(--color-shimmer), transparent);
        background-size: 220% 100%;
        transition: background-color 0.2s ease, filter 0.2s ease;
    }

    .u-image[data-fallback-state="loading"] {
        animation: u-image-placeholder 1.1s ease-in-out infinite;
    }

    .u-image[data-fallback-state="loaded"],
    .u-image.image-fallback-applied {
        background-image: none;
        animation: none;
    }

    .u-image[data-fallback-missing="true"] {
        background-color: var(--color-link);
        background-image: none;
        animation: none;
    }

    @keyframes u-image-placeholder {
        0% {
            background-position: 120% 0;
        }

        100% {
            background-position: -120% 0;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .u-image[data-fallback-state="loading"] {
            animation: none;
        }
    }

    img.image-fallback-applied,
    .content-card__image,
    .home-hero-card__image,
    .listing-layout-card__image {
        background-color: var(--color-link);
    }

    .content-card__media.image-fallback-surface,
    .home-hero-card__media.image-fallback-surface,
    .post-content-inner-background.image-fallback-surface,
    .listing-layout-card__media.image-fallback-surface {
        background-color: var(--color-link);
    }

    .avatar,
    .author {
        aspect-ratio: 1;
        border-radius: var(--radius-round);
        background-color: var(--color-media-placeholder-bg);
    }

    .packshot {
        position: relative;
        overflow: hidden;
        width: 100%;
        aspect-ratio: 1 / 1;
        background-color: var(--color-media-placeholder-bg);
    }
}