.coaching-split-card {
  background: #090b16;
}

.coaching-split-link {
  position: absolute;
  inset: 0;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}

.coaching-split-lol {
  clip-path: polygon(0 0, 40% 0, 27% 100%, 0 100%);
}

.coaching-split-valorant {
  clip-path: polygon(40% 0, 75% 0, 62% 100%, 27% 100%);
}

.coaching-split-tft {
  clip-path: polygon(75% 0, 100% 0, 100% 100%, 62% 100%);
}

.coaching-split-image {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-repeat: no-repeat;
  background-size: auto 130%;
  filter: saturate(1.2) brightness(1.05);
  transition: filter 220ms ease, transform 220ms ease;
}

.coaching-split-lol .coaching-split-image {
  background-image: image-set(
    url("./images/lol/lol-card-square-400.4e641bef9e5c.avif") type('image/avif'),
    url("./images/lol/lol-card-square-400.0e80bc63facc.webp") type('image/webp')
  );
  background-position: 160% top;
  filter: saturate(1.2) brightness(1.05);
}

.coaching-split-valorant .coaching-split-image {
  background-image: image-set(
    url("./images/valorant/valorant-card-square-400.df921f671025.avif") type('image/avif'),
    url("./images/valorant/valorant-card-square-400.2699cb523cce.webp") type('image/webp')
  );
  background-position: 50% top;
}

.coaching-split-tft .coaching-split-image {
  background-image: image-set(
    url("./images/tft/tft-card-square-400.d89ed4403dcf.avif") type('image/avif'),
    url("./images/tft/tft-card-square-400.b475431e8960.webp") type('image/webp')
  );
  background-position: -60% top;
}

.coaching-split-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(5, 7, 15, .35), transparent 36%, rgba(5, 7, 15, .18) 58%, #080a16 100%);
}

.coaching-split-title {
  position: absolute;
  top: 24px;
  left: 0;
  width: 100%;
  pointer-events: none;
  text-align: center;
  color: #fff4d8;
  font-family: 'Exo 2', sans-serif;
  font-size: 1.55rem;
  letter-spacing: .12em;
  text-shadow: 0 2px 12px #000;
}

.coaching-split-caption {
  position: absolute;
  bottom: 28px;
  display: grid;
  gap: 7px;
  text-shadow: 0 2px 8px #000;
}

.coaching-split-lol .coaching-split-caption {
  left: 4%;
  color: #ffe2a0;
}

.coaching-split-valorant .coaching-split-caption {
  left: 32%;
  color: #dedee3;
}

.coaching-split-tft .coaching-split-caption {
  right: 6%;
  color: #c6e2ff;
}

.coaching-split-caption strong {
  font-family: 'Exo 2', sans-serif;
  font-size: clamp(1.1rem, 1.5vw, 1.45rem);
}

.coaching-split-caption > span {
  font-size: .85rem;
  font-weight: 600;
}

.coaching-split-link:is(:hover, :focus-visible) .coaching-split-image {
  filter: saturate(1.2) brightness(1.1);
  transform: scale(1.035);
}

.coaching-split-card:has(.coaching-split-link:is(:hover, :focus-visible)) .coaching-split-link:not(:hover):not(:focus-visible) .coaching-split-image {
  filter: grayscale(1) brightness(.6);
}

.coaching-split-link:focus-visible {
  outline: none;
  background: #ffe2a0;
}

.coaching-split-link:focus-visible .coaching-split-caption {
  outline: 2px solid currentColor;
  outline-offset: 6px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .coaching-split-image {
    transition: none;
  }
}