.tile, .btn{
  display:block; position:relative; border-radius:16px; overflow:hidden; text-decoration:none; color:#fff;
  border:1px solid rgba(255,255,255,.12);
  background:#121213; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.tile:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(122,30,46,.35); }
.tile:hover{ transform: translateY(-2px); border-color:rgba(255,255,255,.28); box-shadow:0 18px 36px -16px var(--burgundy-40); }

.tile{
  aspect-ratio: var(--tile-ratio);
  min-height: 160px;
  background:#151516;
}
.tile .bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:saturate(1.05) contrast(1.02);
  transform: scale(1.01);
}
.tile .veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.30) 40%, rgba(0,0,0,.72) 86%),
    radial-gradient(130% 100% at 50% 0%, rgba(122,30,46,.16), rgba(122,30,46,0) 60%);
}

/* Typografie label */
.tile .label{
  position:absolute; left:14px; bottom:12px;
  font-family: 'Cormorant Garamond', 'Gloock', Georgia, serif;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: .6px;
  text-transform: uppercase;
  line-height: 1.15;
  text-shadow:0 4px 16px rgba(0,0,0,.7);
}

.tile .corner-ico{ position:absolute; right:12px; top:12px; width:26px; height:26px; opacity:.95; }