.scr-ic-wrap {
    display: flex;
    width: 100%;
}

.scr-ic-media {
    --scr-ic-solid: #b91c1c;
    --scr-ic-hover-solid: #111827;
    --scr-ic-opacity: 1;
    --scr-ic-hover-opacity: 1;
    --scr-ic-hover-scale: 1;
    display: block;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    line-height: 0;
    opacity: var(--scr-ic-opacity);
    transform: scale(1);
    transition-property: opacity, transform, box-shadow, border-color;
    transition-timing-function: ease;
}

.scr-ic-media img {
    display: block;
    width: 100%;
    max-width: 100%;
    transition-property: filter, opacity;
    transition-timing-function: ease;
}

.scr-ic-solid {
    position: absolute;
    inset: 0;
    display: block;
    background-color: var(--scr-ic-solid);
    -webkit-mask-image: var(--scr-ic-image);
    mask-image: var(--scr-ic-image);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    opacity: 0;
    pointer-events: none;
    transition-property: opacity, background-color;
    transition-timing-function: ease;
}

.scr-ic-effect-original img { filter: none; }
.scr-ic-effect-grayscale img { filter: grayscale(100%); }
.scr-ic-effect-sepia img { filter: sepia(100%); }
.scr-ic-effect-solid img { opacity: 0; }
.scr-ic-effect-solid .scr-ic-solid { opacity: 1; }

.scr-ic-media:hover {
    opacity: var(--scr-ic-hover-opacity);
    transform: scale(var(--scr-ic-hover-scale));
}

.scr-ic-media.scr-ic-hover-original:hover img { filter: none; opacity: 1; }
.scr-ic-media.scr-ic-hover-grayscale:hover img { filter: grayscale(100%); opacity: 1; }
.scr-ic-media.scr-ic-hover-sepia:hover img { filter: sepia(100%); opacity: 1; }
.scr-ic-media.scr-ic-hover-original:hover .scr-ic-solid,
.scr-ic-media.scr-ic-hover-grayscale:hover .scr-ic-solid,
.scr-ic-media.scr-ic-hover-sepia:hover .scr-ic-solid { opacity: 0; }
.scr-ic-media.scr-ic-hover-solid:hover img { opacity: 0; }
.scr-ic-media.scr-ic-hover-solid:hover .scr-ic-solid {
    background-color: var(--scr-ic-hover-solid);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .scr-ic-media,
    .scr-ic-media img,
    .scr-ic-solid {
        transition-duration: 0s !important;
    }
}