.video{--icon-size:74px;max-width:100%;vertical-align:top;width:100%;height:100%;object-fit:cover;position:relative;aspect-ratio:16/9}.video--poster{cursor:pointer;border-radius:20px;overflow:hidden;-webkit-mask-image:-webkit-radial-gradient(white,#000)}.video--poster iframe,.video--poster video{opacity:0}.video--poster video{pointer-events:none}.video--poster:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:var(--poster);background-size:cover;background-position:center;z-index:1;transition:opacity .4s ease}.video--poster:after{content:"";background-image:var(--play-icon);background-color:#fff;background-position:26px 22px;background-size:calc(var(--icon-size) * .5 - 7px) calc(var(--icon-size) * .5 - 7px);background-repeat:no-repeat;position:absolute;top:50%;left:50%;margin-left:calc(var(--icon-size) * -.5);margin-top:calc(var(--icon-size) * -.5);width:var(--icon-size);height:var(--icon-size);border-radius:50%;z-index:2;transition:transform .4s ease}.video--poster:hover:before{opacity:.8}.video--poster:hover:after{transform:scale(1.1)}.keyboard-input .video--poster:focus:after{outline:2px solid var(--colour-focus)}.video iframe,.video video{width:100%;height:100%;border-radius:20px}@media (min-width:1200px){.video{--icon-size:112px}.video:after{background-position:36px 33px}}