.main-video { border-radius: var(--bs-card-border-radius); } .main-video picture { display: block; } .cover { position: relative; width: 100%; } .cover::before { height: auto; position: absolute; content: url(../images/player-play.svg); left: calc(50% - 40px); top: calc(50% - 40px); width: 80px; z-index: 6; } .cover::after { background: rgba(0, 0, 0, 0.6); content: ""; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 100%; } .cover:hover::after { opacity: 1; transition: all 0.2s ease-in-out; } @media (max-width: 767.98px) { .cover:before { left: calc(50% - 30px); top: calc(50% - 30px); width: 60px; } }