/* Featured guide in the materials catalog. */
.page-materials .material-card--featured {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "image heading" "image body";
}

.material-card--featured .material-card__heading {
  grid-area: heading;
  min-height: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  padding-bottom: 0.8rem;
}

.material-card__eyebrow {
  margin: 0;
  color: var(--accent-dark);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.material-card--featured .material-card__image {
  grid-area: image;
  aspect-ratio: auto;
  min-height: 100%;
}

.material-card--featured .material-card__image img {
  position: absolute;
  inset: 0;
}

.material-card--featured .material-card__body {
  grid-area: body;
  padding-top: 0;
}

.material-card--featured .material-card__description {
  display: block;
  min-height: 0;
  overflow: visible;
  -webkit-line-clamp: unset;
}

.material-card--featured .material-card__jobs li {
  height: auto;
}

@media (max-width: 900px) {
  .page-materials .material-card--featured {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "heading" "image" "body";
  }

  .material-card--featured .material-card__heading {
    padding-bottom: 1.25rem;
  }

  .material-card--featured .material-card__image {
    aspect-ratio: 1;
    min-height: 0;
  }

  .material-card--featured .material-card__body {
    padding-top: 1.25rem;
  }
}