:root {
  --wire-gap: 18px;
  --wire-line: rgba(255, 255, 255, 0.2);
}

.magazine-page {
  padding: clamp(18px, 2vw, 28px);
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: auto;
  grid-template-areas: none;
  gap: var(--wire-gap);
  align-items: start;
}

.hero-image {
  grid-area: auto;
  grid-column: 1 / span 7;
  grid-row: 1 / span 2;
  align-self: stretch;
  display: grid;
  grid-template-rows: minmax(420px, 1fr) auto;
  min-height: 100%;
  overflow: visible;
}

.hero-image img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 50% 18%;
}

.hero-image figcaption,
figcaption {
  position: relative;
  display: block;
  padding: 12px 14px;
  border-top: 1px solid var(--accent);
  background: var(--ink);
  color: var(--text);
  line-height: 1.2;
  z-index: 2;
}

.article-intro {
  grid-area: auto;
  grid-column: 8 / span 5;
  grid-row: 1;
  min-height: auto;
}

.copy-block:nth-of-type(2) {
  grid-area: auto;
  grid-column: 8 / span 5;
  grid-row: 2;
}

.copy-block:nth-of-type(3) {
  grid-area: auto;
  grid-column: 1 / span 6;
  grid-row: 3;
}

.copy-block:nth-of-type(4) {
  grid-area: auto;
  grid-column: 7 / span 6;
  grid-row: 3;
}

.copy-block,
.article-intro {
  overflow: visible;
  height: auto;
}

.copy-block h2 {
  border-bottom: 1px solid rgba(17, 24, 32, 0.22);
  padding-bottom: 8px;
}

.pull-quote {
  grid-area: auto;
  grid-column: 1 / -1;
  grid-row: 4;
  min-height: auto;
}

.image-strip {
  margin-top: var(--wire-gap);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wire-gap);
}

.image-strip img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}

.main-nav a:first-child {
  color: var(--hot-pink);
  border-color: rgba(255, 45, 149, 0.55);
}

@media screen and (max-width: 900px) {
  .article-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .hero-image,
  .article-intro,
  .copy-block:nth-of-type(2),
  .copy-block:nth-of-type(3),
  .copy-block:nth-of-type(4),
  .pull-quote {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .hero-image {
    grid-template-rows: auto auto;
  }

  .hero-image img {
    min-height: auto;
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

@media screen and (max-width: 560px) {
  .image-strip {
    grid-template-columns: 1fr;
  }

  .hero-image img,
  .image-strip img {
    aspect-ratio: 4 / 3;
  }
}