@layer genr.component {
    .image {
        position: relative;

        &.loaded {
            .image__picture {
                background-color: transparent;
            }
        }
    }

    .image__content {
        position: relative;
    }

    .image__picture {
        position: relative;
        display: block;
        width: 100%;
        height: auto;
        background-color: var(--color-border);
    }

    .image__media {
        width: 100%;
        height: auto;
        opacity: var(--image-opacity);
        transition: opacity calc(var(--transition-duration) * 2);

        &.loaded {
            opacity: 1;
        }
    }

    .image__caption {
        opacity: 0.75;
        margin-top: 0.5rem;
        padding-inline: 1.5rem;
        font-style: italic;
        color: var(--color-white);

        @media (width > 1280px) {
            padding-inline: 0;
        }
    }
}