.my-vid { position: relative; margin: 80px 0; }
.my-vid__media { position: relative; overflow: hidden; background: #000; border-radius: 12px; }
.my-vid__poster,
.my-vid__poster img,
.my-vid__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.my-vid__poster { z-index: 1; transition: opacity .3s ease; }
.my-vid__video { z-index: 2; display: none; border: 0; background: #000; }
.my-vid.is-playing .my-vid__video { display: block; }
.my-vid.is-playing .my-vid__poster,
.my-vid.is-playing .my-vid__overlay,
.my-vid.is-playing .my-vid__play { opacity: 0; visibility: hidden; }

.my-vid__overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 12px;
    padding: 6vh 6vw;
    color: #fff;
    text-align: left;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, .15) 45%, rgba(0, 0, 0, 0) 75%);
    transition: opacity .3s ease;
}
.my-vid__overlay .my-vid__title { font-size: clamp(28px, 4vw, 56px); font-weight: 700; line-height: 1.1; }
.my-vid__overlay .my-vid__desc { font-size: clamp(15px, 1.4vw, 20px); line-height: 1.5; max-width: 760px; }
.my-vid__overlay .my-vid__desc :last-child { margin-bottom: 0; }

.my-vid__play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    width: 88px;
    height: 88px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, opacity .3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.my-vid__play:hover { background: rgba(0, 0, 0, .75); transform: translate(-50%, -50%) scale(1.06); }
.my-vid__play-icon {
    width: 0;
    height: 0;
    margin-left: 6px;
    border-style: solid;
    border-width: 14px 0 14px 24px;
    border-color: transparent transparent transparent #fff;
}

.my-vid--full { width: 100%; }
.my-vid--full .my-vid__media { width: 100%; height: calc(100vh - 300px); }

.my-vid--inline { width: 100%; }
.my-vid--inline .my-vid__head { margin-bottom: 16px; }
.my-vid--inline .my-vid__head .my-vid__title { font-size: clamp(22px, 2.4vw, 34px); font-weight: 700; line-height: 1.15; margin-bottom: 8px; }
.my-vid--inline .my-vid__head .my-vid__desc { font-size: 16px; line-height: 1.55; color: inherit; }
.my-vid--inline .my-vid__head .my-vid__desc :last-child { margin-bottom: 0; }
.my-vid--inline .my-vid__media { width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; }

@supports not (aspect-ratio: 16 / 9) {
    .my-vid--inline .my-vid__media { height: 0; padding-bottom: 56.25%; }
}

@media (max-width: 767px) {
    .my-vid { margin: 48px 0; }
    .my-vid--full .my-vid__media { width: 100%; height: auto; min-height: 180px; }
    .my-vid--full .my-vid__poster,
    .my-vid--full .my-vid__poster img { position: relative; inset: auto; width: 100%; height: auto; }
    .my-vid__play { width: 64px; height: 64px; }
    .my-vid__play-icon { border-width: 11px 0 11px 18px; }
}