.play {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 48px;
   height: 48px;
   z-index: 1;
   border-radius: 50%;
   background-color: cl("accent");
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='6,3 20,12 6,21' fill='white'/%3E%3C/svg%3E");
   background-size: 25px 30px;
   background-position: center;
   background-repeat: no-repeat;
   cursor: pointer;
   transition: background-color 0.2s ease-in-out;

   &:hover {
      background-color: transparent;
      border: 2px solid cl("accent");
   }

   @include _Tablet {
      width: 68px;
      height: 68px;
      background-size: 55px 40px;
   }

   @include _XSDesktop {
      width: 40px;
      height: 40px;
      background-size: 40px 22px;
   }

   @include _Desktop {
      width: 48px;
      height: 48px;
      background-size: 40px 30px;
   }

   @include _HDesktop {
      width: 84px;
      height: 84px;
      background-size: 55px 45px;
   }
}
