/* Related [white] — 616:17838: фон белый, отступы 88/110, промежуток 28 */
.rel {
  background: var(--white);
  padding: 88px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.rel__title {
  font-size: clamp(24px, 1.6667vw, 32px);
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.6px;
  color: var(--ink);
}
.rel__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.relc { display: flex; flex-direction: column; border-radius: 14px; background: var(--paper); overflow: hidden; }
.relc__media { height: clamp(160px, 11.4583vw, 220px); background: var(--white); }
.relc__media img { width: 100%; height: 100%; object-fit: cover; }
.relc__body { display: flex; flex-direction: column; gap: 10px; padding: 20px 24px 28px; }
.relc__meta { display: flex; gap: 8px; font-size: 11px; font-weight: 600; line-height: normal; color: var(--ink); }
.relc__meta > span:first-child { letter-spacing: 0.5px; }
.relc__dot { opacity: 0.4; }
.relc__date { opacity: 0.5; }
.relc__name {
  font-size: 16px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.2px;
  color: var(--ink);
}
.relc__name a:hover { color: var(--gold-from); }

@media (max-width: 1023px) { .rel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px)  { .rel__grid { grid-template-columns: 1fr; } .rel { padding-block: 56px; } }