/* v4.1.6: approved creative workbench hero. Scoped to Home only. */
.hero-workbench .hero-workbench-link {
  display: block;
  position: relative;
  overflow: hidden;
  border: 1px solid #44516a;
  border-radius: 14px;
  background: #111d30;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
}
.hero-workbench .hero-workbench-link img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
}
.hero-workbench .hero-workbench-link:focus-visible {
  outline: 3px solid #ff9d4e;
  outline-offset: 5px;
}
@media (max-width: 700px) {
  .hero-art.hero-workbench { max-width: 100%; }
}

/* Give the workbench more space while retaining its complete composition. */
@media (min-width: 801px) {
  .hero .hero-workbench-grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    column-gap: clamp(24px, 2.6vw, 36px);
  }
  .hero-workbench-grid > .hero-copy { min-width: 0; }
  .hero-workbench-grid > .hero-workbench {
    min-width: 0;
    max-width: none;
    transform: translateY(-24px);
  }
}
@media (min-width: 1200px) {
  .hero .hero-workbench-grid {
    width: min(1260px, calc(100% - 64px));
  }
}
/* Stack before the larger illustration crowds tablet-width copy. */
@media (min-width: 601px) and (max-width: 800px) {
  .hero .hero-workbench-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .hero-workbench-grid > .hero-workbench {
    width: 100%;
    max-width: 640px;
    justify-self: center;
  }
}