.resource-hero {
  position: relative;
}

.layout-switch {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

.resource-split {
  display: grid;
  grid-template-columns: 1.05fr 1.15fr;
  gap: 1rem;
  align-items: center;
}

.resource-image-frame {
  margin: 0;
}

.resource-image-frame img {
  width: 100%;
  height: clamp(280px, 38vw, 460px);
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.resource-banner-image {
  width: 100%;
  height: clamp(320px, 40vw, 520px);
  object-fit: cover;
  display: block;
}

.resource-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 28, 38, 0.64) 0 50%, rgba(20, 28, 38, 0.16) 100%);
  display: grid;
  align-items: center;
}

.resource-banner-overlay .kicker,
.resource-banner-overlay h1,
.resource-banner-overlay p {
  color: #fff;
}

.resource-card-accent {
  border-top: 5px solid var(--brand);
}

.resource-mosaic {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 1rem;
  align-items: stretch;
}

.resource-mosaic-image {
  margin: 0;
}

.resource-mosaic-image img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--border);
}

.resource-mosaic-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 900px) {
  .resource-split,
  .resource-mosaic {
    grid-template-columns: 1fr;
  }

  .resource-banner-overlay {
    position: static;
    background: #2f425b;
    padding: 1rem 0;
  }
}