/* thumbnails on the HumaLux example tiles (the poster of each video), so people want to click */
.tiles .tile[data-play]{--thumb-h:clamp(150px,15vw,210px);padding-top:calc(var(--thumb-h) + 14px)}
.tiles .tile[data-play]::after{content:"";position:absolute;left:0;right:0;top:0;height:var(--thumb-h);z-index:0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='28' fill='rgba(11,11,11,0.38)' stroke='rgba(246,241,232,0.9)' stroke-width='1.5'/%3E%3Cpath d='M25 19.5v21l17-10.5z' fill='%23F6F1E8'/%3E%3C/svg%3E") center/52px 52px no-repeat,
    linear-gradient(180deg,rgba(11,11,11,0) 55%,rgba(11,11,11,.18) 100%),
    var(--thumb) center 32%/cover no-repeat;
  transition:filter .6s var(--ease,ease),transform .9s var(--ease,ease);transform-origin:50% 40%}
.tiles .tile[data-play]:hover::after,.tiles .tile[data-play]:focus-visible::after{filter:brightness(1.06) saturate(1.05)}
.tiles .tile[data-play]::before{z-index:2;top:calc(var(--thumb-h) / 2 - 15px);right:calc(50% - 15px);border-color:#F6F1E8}
.tiles .tile[data-play]>span{position:relative;z-index:1}
.tiles .tile[data-play="message"]{--thumb:url("../media/humalux/message.jpg")}
.tiles .tile[data-play="voix"]{--thumb:url("../media/humalux/voix.jpg")}
.tiles .tile[data-play="carrousel"]{--thumb:url("../media/humalux/carrousel.jpg")}
@media (max-width:520px){.tiles .tile[data-play]{--thumb-h:210px}}