.showcase-detail-content {
  display: grid;
  gap: 18px;
  margin-block: 18px;
}

.showcase-detail-hero {
  --hero-seam-offset: 0%;
  --hero-blend-width: 24%;
  --hero-ink-opacity: 1;
  --hero-blend-blur: 18px;

  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--ink);
}

.showcase-detail-hero-media,
.showcase-detail-hero-crop,
.showcase-detail-hero-image,
.showcase-detail-hero-blend {
  position: absolute;
}

.showcase-detail-hero-media {
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: var(--ink);
}

.showcase-detail-hero-crop {
  top: 0;
  bottom: 0;
  overflow: hidden;
}

.showcase-detail-hero-crop--1 {
  left: 0;
  width: var(--hero-left-width);
  clip-path: polygon(0 0, var(--hero-left-top) 0, 100% 100%, 0 100%);
}

.showcase-detail-hero-crop--2 {
  right: 0;
  width: var(--hero-right-width);
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--hero-right-bottom) 100%);
}

.showcase-detail-hero-image {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.showcase-detail-hero-image--1,
.showcase-detail-hero-image--2 { display: block; }

.showcase-detail-hero-media::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
  background: linear-gradient(0deg, rgb(5 5 5 / 78%) 0, rgb(5 5 5 / 34%) 22%, transparent 48%);
  pointer-events: none;
}

.showcase-detail-hero-blend {
  z-index: 1;
  top: -25%;
  bottom: -25%;
  left: calc(46% + var(--hero-seam-offset));
  width: var(--hero-blend-width);
  opacity: var(--hero-ink-opacity);
  background: linear-gradient(90deg, transparent 0, rgb(5 5 5 / 18%) 18%, rgb(5 5 5 / 68%) 36%, var(--ink) 48%, var(--ink) 52%, rgb(5 5 5 / 68%) 64%, rgb(5 5 5 / 18%) 82%, transparent 100%);
  filter: blur(var(--hero-blend-blur));
  transform: translateX(-50%) rotate(-23deg);
  pointer-events: none;
}

.showcase-detail-hero-copy {
  position: absolute;
  z-index: 3;
  right: 24px;
  bottom: 24px;
  left: 24px;
  max-width: 48ch;
  text-shadow: 0 2px 18px rgb(0 0 0 / 88%);
}

.showcase-detail-hero-copy h1 {
  margin: 0;
  color: var(--cream);
  font-size: calc(var(--type-t1-size) * 3);
  font-weight: var(--type-t1-weight);
  line-height: var(--type-t1-line-height);
  letter-spacing: var(--type-t1-letter-spacing);
}

.showcase-detail-hero-copy p {
  margin: 8px 0 0;
  color: var(--cream);
  font-size: calc(var(--type-t3-size) + 5px);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

@media (min-width: 744px) {
  .showcase-detail-hero-copy {
    right: 36px;
    bottom: 36px;
    left: 36px;
  }

  .showcase-detail-hero-copy p {
    margin-top: 14px;
  }
}

.showcase-detail-lower {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr);
  gap: 18px;
  align-items: stretch;
}

.showcase-detail-images {
  display: grid;
  gap: 18px;
}

.showcase-detail-images > .showcase-detail-image-frame {
  min-width: 0;
  min-height: 0;
}

.showcase-detail-images--3 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: calc(37.5cqw - 15.75px);
}

.showcase-detail-images--4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  height: calc(37.5cqw - 15.75px);
}

.showcase-detail-images--4 > :first-child {
  grid-row: 1 / 3;
}

.showcase-detail-images--5,
.showcase-detail-images--6,
.showcase-detail-images--7 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  height: calc(25cqw - 16.5px);
}

.showcase-detail-images--5 > :first-child,
.showcase-detail-images--6 > :first-child {
  grid-row: 1 / 3;
}

.showcase-detail-images--5 > :nth-child(2) {
  grid-row: 1 / 3;
}

@media (min-width: 744px) {
  .showcase-detail-images--5,
  .showcase-detail-images--6,
  .showcase-detail-images--7 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    height: calc(37.5cqw - 15.75px);
  }

  .showcase-detail-images--5 > :first-child,
  .showcase-detail-images--6 > :first-child {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }

  .showcase-detail-images--5 > :nth-child(2) {
    grid-column: 3 / 5;
    grid-row: 1;
  }

  .showcase-detail-images--5 > :nth-child(3) { grid-column: 3; grid-row: 2; }
  .showcase-detail-images--5 > :nth-child(4) { grid-column: 4; grid-row: 2; }

  .showcase-detail-images--6 > :nth-child(2) { grid-column: 3; grid-row: 1; }
  .showcase-detail-images--6 > :nth-child(3) { grid-column: 4; grid-row: 1; }
  .showcase-detail-images--6 > :nth-child(4) { grid-column: 3; grid-row: 2; }
  .showcase-detail-images--6 > :nth-child(5) { grid-column: 4; grid-row: 2; }

  .showcase-detail-images--7 > :first-child { grid-column: 1 / 3; grid-row: 1; }
  .showcase-detail-images--7 > :nth-child(2) { grid-column: 1 / 3; grid-row: 2; }
  .showcase-detail-images--7 > :nth-child(3) { grid-column: 3; grid-row: 1; }
  .showcase-detail-images--7 > :nth-child(4) { grid-column: 4; grid-row: 1; }
  .showcase-detail-images--7 > :nth-child(5) { grid-column: 3; grid-row: 2; }
  .showcase-detail-images--7 > :nth-child(6) { grid-column: 4; grid-row: 2; }
}

.showcase-detail-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px;
  color: var(--cream);
  background: var(--ink);
}

.showcase-detail-copy :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-size: var(--type-t2-size);
  font-weight: var(--type-t2-weight);
  line-height: var(--type-t2-line-height);
  letter-spacing: var(--type-t2-letter-spacing);
}

.showcase-detail-copy p,
.showcase-detail-copy li,
.showcase-detail-copy :is(th, td, dt, dd),
.showcase-detail-tag {
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.showcase-detail-body {
  display: grid;
  gap: 12px;
  margin: 12px 0 0;
  color: rgb(252 252 251 / 76%);
}

.showcase-detail-body--clamped { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; }
.showcase-detail-description-open { position: absolute; left: 20px; bottom: calc(20px + (var(--type-t3-size) * var(--type-t3-line-height) * 3)); width: fit-content; padding-bottom: 1px; color: var(--acid); font-size: var(--type-t3-size); font-weight: var(--type-t3-weight); line-height: var(--type-t3-line-height); border-bottom: 1px solid var(--acid); text-decoration: none; }
.showcase-detail-description-open[hidden] { display: none; }
.showcase-detail-description-open::after { content: " ↗"; }
.showcase-description-modal { position: fixed; z-index: 50; inset: 0; display: none; padding: 24px; place-items: center; background: rgb(5 5 5 / 72%); backdrop-filter: blur(7px); }
.showcase-description-modal:target { display: grid; }
.showcase-description-sheet { width: min(900px, calc(100vw - 48px)); max-height: calc(100dvh - 48px); padding: 24px; overflow: auto; color: var(--cream); background: var(--ink); }
.showcase-description-sheet header { display: flex; gap: 18px; align-items: center; justify-content: space-between; }
.showcase-description-sheet h2 { margin: 0; font-size: var(--type-t1-size); }
.showcase-description-close { padding: 7px 12px; color: var(--ink); border-radius: var(--container-radius); background: var(--acid); text-decoration: none; }
.showcase-description-body { display: grid; gap: 12px; margin-top: 20px; }
.showcase-description-body :is(h1, h2, h3, h4, h5, h6, p, ul, ol) { margin: 0; }

.showcase-detail-body :is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, pre, table, dl, hr) { margin: 0; }
.showcase-detail-body :is(h1, h2, h3, h4, h5, h6) { color: var(--cream); }
.showcase-detail-body :is(ul, ol) { display: grid; gap: 8px; padding-left: 20px; }
.showcase-detail-body blockquote { padding-left: 14px; border-left: 1px solid rgb(252 252 251 / 50%); }
.showcase-detail-body a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.showcase-detail-body code { padding-inline: 4px; color: var(--ink); border-radius: 4px; background: var(--cream); }
.showcase-detail-body pre { max-width: 100%; padding: 12px; overflow-x: auto; border: 1px solid rgb(252 252 251 / 28%); border-radius: var(--container-radius); background: rgb(252 252 251 / 10%); }
.showcase-detail-body pre code { padding: 0; color: var(--cream); background: transparent; }
.showcase-detail-body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.showcase-detail-body :is(th, td) { padding: 8px 10px; text-align: left; border: 1px solid rgb(252 252 251 / 28%); }
.showcase-detail-body dl { display: grid; gap: 6px 12px; grid-template-columns: auto minmax(0, 1fr); }
.showcase-detail-body :is(dt, dd) { margin: 0; }
.showcase-detail-body dt { color: var(--cream); font-weight: var(--type-t2-weight); }
.showcase-detail-body hr { width: 100%; border: 0; border-top: 1px solid rgb(252 252 251 / 36%); }
.showcase-detail-body .task-list-item { list-style: none; }
.showcase-detail-body .task-list-item-checkbox { margin-inline: -20px 8px; accent-color: var(--acid); }
.showcase-detail-body .content-markdown-image { display: grid; gap: 8px; margin: 0; }
.showcase-detail-body .content-markdown-image img { display: block; width: 100%; height: auto; border: var(--container-border); border-radius: var(--container-radius); }
.showcase-detail-body .content-markdown-image-caption { color: rgb(252 252 251 / 68%); font-size: var(--type-t3-size); font-weight: var(--type-t3-weight); line-height: var(--type-t3-line-height); letter-spacing: var(--type-t3-letter-spacing); }

.showcase-detail-tag {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: block;
  width: fit-content;
  margin: 0;
  color: rgb(252 252 251 / 50%);
}

@media (min-width: 744px) and (max-width: 1023px) {
  .showcase-detail-lower {
    grid-template-columns: minmax(0, 1fr);
  }

  .showcase-detail-images--3 {
    height: calc(50cqw - 9px);
  }

  .showcase-detail-images--4 {
    height: calc(50cqw - 9px);
  }

  .showcase-detail-images--5,
  .showcase-detail-images--6,
  .showcase-detail-images--7 {
    height: calc(50cqw - 9px);
  }
}

@media (max-width: 743px) {
  .showcase-detail-hero {
    aspect-ratio: 4 / 3;
  }

  .showcase-detail-hero-image--1 {
    object-position: 62% 52%;
  }

  .showcase-detail-hero-image--2 {
    object-position: 52% 64%;
  }

  .showcase-detail-hero-blend {
    width: min(calc(var(--hero-blend-width) + 10%), 50%);
    filter: blur(min(var(--hero-blend-blur), 10px));
    transform: translateX(-50%) rotate(-13.5deg);
  }

  .showcase-detail-hero-copy {
    right: 16px;
    bottom: 16px;
    left: 16px;
  }

  .showcase-detail-lower {
    grid-template-columns: minmax(0, 1fr);
  }

  .showcase-detail-images {
    height: calc(90vw * 3 / 4);
  }
}