.cases-section {
  --cases-accent: #ef5143;
  --cases-paper: #fff6ea;
  min-height: 100svh;
  padding: clamp(36px, 2.65vw, 52px) var(--layout-gutter)
    clamp(66px, 6.4vw, 112px) var(--layout-content-left);
  background: #191917;
  background-image: linear-gradient(rgb(21 21 20 / .98), rgb(21 21 20 / .98)),
    url('/assets/studio-hero/texturelabs-paper234.webp');
  background-size: cover;
  color: var(--cases-paper);
}

.cases-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 22%);
  align-items: center;
  gap: clamp(22px, 2.4vw, 44px);
  margin-bottom: clamp(30px, 2.7vw, 48px);
}

.cases-heading {
  position: relative;
  min-width: 0;
  container-type: inline-size;
}

.cases-title {
  margin: 0;
  font: 700 clamp(36px, 12.5vw, 225px)/1 Oswald, 'Arial Narrow', sans-serif;
  font-size: clamp(36px, 19cqw, 225px);
  letter-spacing: -.007em;
  white-space: nowrap;
}

.cases-ribbon {
  position: absolute;
  inset-block-start: 55%;
  inset-inline-start: 23%;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  column-gap: .5em;
  inline-size: 56%;
  min-height: clamp(26px, 3.8cqw, 45px);
  margin: 0;
  padding: 5px 7px;
  transform: translateY(-50%);
  background: #ce352a;
  color: var(--cases-paper);
  font: 700 clamp(10px, 1.8cqw, 22px)/1.08 Oswald, 'Arial Narrow', sans-serif;
  letter-spacing: .145em;
  text-align: center;
}

.cases-ribbon > span { white-space: nowrap }

.cases-disciplines {
  margin: 0;
  padding-inline-start: clamp(15px, 1.65vw, 29px);
  border-inline-start: 3px solid var(--cases-accent);
  font: 600 clamp(16px, 1.36vw, 24px)/1.38 Onest, Arial, sans-serif;
  text-transform: uppercase;
}

.cases-disciplines > span { display: block }

.cases-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.cases-grid > li { min-width: 0 }

.case-cover {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  inline-size: 100%;
  aspect-ratio: 389 / 384;
  min-height: 232px;
  overflow: hidden;
  padding: clamp(16px, 1.42vw, 25px);
  background: #111110;
  color: var(--cases-paper);
  text-decoration: none;
}

.case-cover img,
.case-cover::after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.case-cover img {
  z-index: -2;
  object-fit: cover;
  transition: transform .4s var(--motion-ease);
}

.case-cover::after {
  z-index: -1;
  background: linear-gradient(180deg, transparent 42%, rgb(12 12 11 / .72) 100%);
  content: "";
}

.case-cover:is(:hover, :focus-visible) img { transform: scale(1.045) }

.case-cover:focus-visible {
  outline: 3px solid var(--cases-paper);
  outline-offset: -5px;
}

.case-number {
  margin-bottom: clamp(11px, 1.05vw, 18px);
  color: #ff8c7e;
  font: 600 clamp(13px, .9vw, 15px)/1.2 Onest, Arial, sans-serif;
  letter-spacing: .04em;
}

.case-title {
  margin: 0;
  font: 700 clamp(30px, 2.66vw, 46px)/1.06 Oswald, 'Arial Narrow', sans-serif;
}

.case-description {
  margin: 10px 0 0;
  font: 400 clamp(14px, 1.03vw, 18px)/1.35 Onest, Arial, sans-serif;
}

.cases-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(22px, 3.5vw, 64px);
  margin-top: clamp(32px, 4vw, 72px);
}

.cases-footer p {
  max-width: 54em;
  margin: 0;
  font: 400 clamp(16px, 1.32vw, 23px)/1.62 LiraStudioUnbounded, Arial, sans-serif;
  letter-spacing: -.026em;
  text-wrap: balance;
}

.cases-all {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  min-width: clamp(153px, 13vw, 229px);
  min-height: 64px;
  padding: 16px 20px;
  background: var(--cases-accent);
  color: #151310;
  font: 500 15px/1.3 LiraStudioUnbounded, Arial, sans-serif;
  text-align: center;
  text-decoration: none;
}

.cases-all:is(:hover, :focus-visible) { background: #ff7466 }
.cases-all:focus-visible { outline: 2px solid var(--cases-paper); outline-offset: 4px }

@media (min-width: 1000px) and (max-width: 1220px) {
  .case-description { min-block-size: 2.7em }
}

@media (max-width: 999px) {
  .cases-header { grid-template-columns: 1fr }
  .cases-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .cases-disciplines > span { display: inline }
}

@media (max-width: 560px) {
  .cases-title {
    display: grid;
    gap: .56em;
    font-size: clamp(62px, 35.5cqw, 150px);
    white-space: normal;
  }

  .cases-ribbon {
    inset-block-start: 50%;
    inset-inline-start: 0;
    inline-size: min(100%, 320px);
    padding: 7px 6px;
    font-size: clamp(11px, 4.5cqw, 15px);
    letter-spacing: .11em;
  }

  .cases-grid { grid-template-columns: 1fr }
  .cases-footer { flex-direction: column; align-items: stretch }
  .cases-all { min-height: 54px }
}

@media (prefers-reduced-motion: reduce) {
  .case-cover img { transition: none }
  .case-cover:is(:hover, :focus-visible) img { transform: none }
}

html[data-motion="reduced"] .case-cover img {
  transition: none;
  transform: none;
}