.paths { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 20px; }
.paths--1 { grid-template-columns: 1fr; }
.paths--2 { grid-template-columns: 1.5fr 1fr; }
.paths--4 { grid-template-columns: 1fr 1fr; }
.paths--4 .path { height: clamp(340px, 34vw, 460px); }
.path { position: relative; height: clamp(380px, 44vw, 540px); overflow: hidden; border-radius: var(--r-card); background: var(--lilac); }
.path a { position: absolute; inset: 0; display: flex; align-items: flex-end; color: #fff; text-decoration: none; }
.path a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(11 4 73 / 0) 28%, rgb(11 4 73 / .58) 62%, rgb(11 4 73 / .92) 100%); }
.path img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.path a:hover img { transform: scale(1.06); }
.path__body { position: relative; z-index: 1; display: grid; gap: 4px; width: 100%; padding: clamp(20px, 2.6vw, 36px); }
.path__title { display: block; margin: 0; padding: 0; color: inherit; font: 500 clamp(1.7rem, 2.6vw, 2.5rem) / 1.12 var(--font-d); letter-spacing: 0; text-wrap: balance; }
.path__sub { color: rgb(255 255 255 / .9); }
.path__meta { margin-top: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.path__go {
  position: absolute; z-index: 1; top: 20px; right: 20px; display: grid; place-items: center; width: 56px; height: 56px;
  border-radius: 50%; background: var(--paper); color: var(--ink); font-size: 1.4rem;
  transition: transform .6s var(--ease), background-color .3s;
}
.path a:hover .path__go { transform: rotate(-45deg); background: var(--blush-2); }

@media (max-width: 1023px) {
  .paths, .paths--2, .paths--4 { grid-template-columns: 1fr 1fr; }
  .path:first-child { grid-column: 1 / -1; }
  .paths--4 .path:first-child { grid-column: auto; }
  .paths--4 .path { height: clamp(260px, 40vw, 360px); }
  .path { height: clamp(260px, 44vw, 380px); }
}
@media (max-width: 767px) {
  .paths, .paths--2, .paths--4 { grid-template-columns: 1fr; gap: 14px; }
  .path, .paths--4 .path { height: 250px; }
  .path__go { width: 48px; height: 48px; top: 14px; right: 14px; }
}