.workshop-range {
  background: #fff;
}

#site-content .workshop-range .pilot-project-types__intro {
  margin-bottom: clamp(40px, 7vw, 112px);
}

#site-content .workshop-range .pilot-project-types__intro > p:last-child {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .025em;
}

#site-content .workshop-range .pilot-project-types__items {
  counter-reset: workshop-room;
  gap: clamp(48px, 8vw, 112px);
}

.workshop-range .pilot-project-types__item {
  counter-increment: workshop-room;
}

#site-content .workshop-range .pilot-project-types__label {
  text-transform: uppercase;
}

#site-content .workshop-range .pilot-project-types__copy > .pilot-project-types__label {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.workshop-range .pilot-project-types__copy > .pilot-project-types__label::before {
  content: counter(workshop-room, decimal-leading-zero) / "";
  color: inherit;
  font-size: clamp(34px, 3.2vw, 46px);
  line-height: 1;
  letter-spacing: -.04em;
}

#site-content .pilot-project-types.workshop-range h3 {
  text-transform: uppercase;
}

#site-content .workshop-range .workshop-range__link {
  margin-top: 24px;
  font: 500 13px/1.6 "Space Grotesk", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
}

#site-content .workshop-range .workshop-range__link a {
  text-decoration: none;
}

.workshop-range__link-label {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.workshop-range__link-arrow {
  display: inline-block;
  margin-inline-start: .4em;
}

.workshop-range__image-link {
  display: block;
}

.workshop-range :is(.workshop-range__image-link, .pilot-project-types__media:not(:has(> a))) {
  overflow: hidden;
}

#site-content .workshop-range .pilot-project-types__media img {
  aspect-ratio: 4 / 3;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .workshop-range .pilot-project-types__media img {
    transition: transform .35s ease;
  }

  .workshop-range .pilot-project-types__media:hover img {
    transform: scale(1.025);
  }

  .workshop-range__link-arrow {
    transition: transform .25s ease;
  }

  .workshop-range__link a:hover .workshop-range__link-arrow {
    transform: translateX(4px);
  }
}
