.video-feature {
    position: relative;
    z-index: 1;
    overflow: hidden
}

.video-feature__box-wrapper {
    z-index: 2
}

.video-feature__box {
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.48);
}

@supports(-webkit-backdrop-filter:blur(10px)) or (backdrop-filter:blur(10px)) {
    .video-feature__box {
        /*background-color: hsla(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l), 0.8);*/
        /*-webkit-backdrop-filter: blur(10px);*/
        /*backdrop-filter: blur(10px);*/
    }
}

.video-feature__video-wrapper {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.video-feature__video-wrapper img,
.video-feature__video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    height: 100%;
    width: 100%
}

.video-feature__video-wrapper img {
    display: block;
}

@media(prefers-reduced-motion:reduce) {
    .video-feature__video-wrapper video {
        visibility: hidden
    }

    .video-feature__video-wrapper img {
        display: block
    }
}

.video-feature__link {
    --transition-duration: .4s;
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.075);
    border-radius: inherit;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    color: var(--color-contrast-higher);
    text-decoration: none;
    transition: var(--transition-duration)
}

.video-feature__link>* {
    position: relative;
    z-index: 2
}

.video-feature__link::before {
    content: "";
    position: absolute;
    bottom: -20%;
    left: -5%;
    width: 110%;
    height: 140%;
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.9);
    will-change: transform;
    transform: scaleY(0) skewY(10deg);
    transform-origin: center bottom;
    transition: transform var(--transition-duration) var(--ease-in-out)
}

.video-feature__link:hover {
    color: var(--color-bg)
}

.video-feature__link:hover::before {
    transform: scaleY(1) skewY(0deg)
}

.video-feature__link:hover .video-feature__link-icon>*:first-child {
    transform: rotate(-180deg)
}

.video-feature__link:hover .video-feature__link-icon>*:last-child {
    transform: rotate(180deg)
}

.video-feature__link-icon>* {
    will-change: transform;
    transition: transform var(--transition-duration) var(--ease-in-out)
}

.video-feature__link-icon>*:first-child {
    transform-origin: 8px 5px
}

.video-feature__link-icon>*:last-child {
    transform-origin: 8px 11px
}