.youtube-showcase {
    margin: 28px 0 34px;
    overflow: hidden;
    background: #101814;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(23, 51, 42, .12);
}

.youtube-lite {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #101814;
}

.youtube-lite > img,
.youtube-lite > iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.youtube-lite > img {
    object-fit: cover;
    transform: scale(1.01);
    transition: transform .35s ease;
}

.youtube-lite:hover > img {
    transform: scale(1.045);
}

.youtube-lite__shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 45%, rgba(7, 20, 14, .78) 100%),
        radial-gradient(circle at center, transparent 0, rgba(0, 0, 0, .12) 70%);
}

.youtube-lite__play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-flex;
    width: 68px;
    height: 68px;
    padding: 0;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #e62117;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
    transform: translate(-50%, -50%);
    transition: background-color .2s ease, transform .2s ease;
}

.youtube-lite__play:hover,
.youtube-lite__play:focus-visible {
    color: #17332a;
    background: #ffd814;
    outline: 3px solid rgba(255, 255, 255, .85);
    transform: translate(-50%, -50%) scale(1.08);
}

.youtube-lite__play i {
    margin-left: 4px;
    font-size: 1.25rem;
}

.youtube-lite__title {
    position: absolute;
    right: 62px;
    bottom: 17px;
    left: 62px;
    overflow: hidden;
    color: #fff;
    font-size: .86rem;
    font-weight: 700;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.youtube-showcase .carousel-control-prev,
.youtube-showcase .carousel-control-next {
    z-index: 4;
    width: 12%;
}

.youtube-lite.is-playing {
    background: #000;
}

@media (max-width: 575.98px) {
    .youtube-showcase {
        margin: 22px 0 28px;
        border-radius: 10px;
    }

    .youtube-lite__play {
        width: 56px;
        height: 56px;
    }

    .youtube-lite__title {
        right: 42px;
        bottom: 11px;
        left: 42px;
        font-size: .72rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .youtube-lite > img,
    .youtube-lite__play {
        transition: none;
    }
}