:root{--video-title-color:#fff;--video-title-shadow:rgba(1,1,1,.6)}.video{container:video/inline-size;position:relative}.video__element{border-radius:24px;margin:0 auto;width:100%}.video__container,.video__element{height:100%;overflow:hidden;position:relative}.video__container{aspect-ratio:16/9;display:flex;flex-direction:column;justify-content:center;max-width:100%}.video__image{height:100%;margin:0;object-fit:cover;position:absolute;width:100%}.video__content{align-items:flex-end;bottom:0;display:flex;justify-content:space-between;padding:20px;position:absolute;width:100%}.video__content--no-title{justify-content:flex-end}.video__content--has-copyright .video__title{margin-bottom:24px}.video__title{color:var(--video-title-color);font-size:var(--heading-4-font-size);margin:0;text-shadow:2px 2px 5px var(--video-title-shadow)}.video__button{height:100%;left:0;position:absolute;top:0;width:100%}.video__button:focus .video__icon,.video__button:hover .video__icon{transform:scale(1.1)}.video__button span{clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;width:1px}.video__icon{flex-shrink:0;height:30px;transition:transform .3s ease-in-out;width:auto}.video--portrait .video__element{max-width:500px}.video--portrait .video__container{aspect-ratio:4/5}.video--square .video__element{max-width:500px}.video--square .video__container{aspect-ratio:1/1}@container video (min-width: 450px){.video__title{font-size:var(--heading-3-font-size)}.video__icon{height:40px}}