.before-after {
  display: grid;
  gap: var(--space-neutral);
  padding-inline: var(--space-small);
}

.before-after__frame {
  margin-inline: auto;
  width: min(100%, calc(48em - (var(--space-small) * 2)));
}

.before-after__grid {
  display: grid;
  gap: var(--space-small);
  grid-template-columns: 1fr 1fr;
  margin-inline: auto;
  max-width: 36em;
  width: 100%;
}

.before-after__grid--with-arrow {
  --before-after-arrow-size: clamp(2.35rem, 7vw, 3.9rem);

  align-items: center;
  grid-template-columns: minmax(0, 1fr) var(--before-after-arrow-size) minmax(0, 1fr);
}

.before-after__grid--with-arrow > * {
  min-width: 0;
}

.before-after__item {
  display: grid;
  gap: 0.625em;
  margin: 0;
  min-width: 0;
}

.before-after__arrow {
  align-self: center;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.before-after__arrow-art {
  color: oklch(var(--lch-ink-darkest));
  display: block;
  filter: drop-shadow(0 0.7rem 1.4rem oklch(var(--lch-ink-medium) / 0.24));
  height: auto;
  transform: none;
  width: 100%;
}

.before-after__image-wrap {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-panel);
  overflow: hidden;
  position: relative;
}

.before-after__image {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  width: 100%;
}

.before-after__label {
  align-items: center;
  background: oklch(var(--lch-ink-darkest) / 0.88);
  border-radius: 999px;
  box-shadow: var(--box-shadow-pill);
  color: var(--color-ink-lightest);
  display: inline-flex;
  font-size: var(--font-size-xx-small);
  font-weight: 700;
  gap: 0.35em;
  justify-self: center;
  letter-spacing: var(--letter-spacing-looser);
  line-height: 1;
  padding: 0.7em 1em 0.75em;
  text-align: center;
  text-transform: uppercase;
}

.workspace-showcase {
  display: grid;
  padding-inline: var(--space-small);
  position: relative;
}

.workspace-showcase__container {
  display: grid;
  gap: var(--space-neutral);
  margin-inline: auto;
  position: relative;
  width: min(100%, 43em);
}

.workspace-showcase__figure {
  align-content: start;
  display: grid;
  gap: var(--space-small);
  margin: 0 auto;
  width: min(100%, 21em);
}

.workspace-showcase__frame {
  aspect-ratio: 2 / 1;
  background: var(--color-canvas-light);
  border-radius: var(--radius-panel);
  box-shadow: var(--box-shadow);
  display: grid;
  overflow: clip;
  position: relative;
  width: 100%;
}

.workspace-showcase__image {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  width: 100%;
}

.workspace-showcase__figure figcaption {
  color: var(--color-ink-darker);
  font-size: var(--font-size-xxxx-small);
  letter-spacing: var(--letter-spacing);
  margin: -0.375em var(--space-large);
  text-align: center;
}

.before-after-strip {
  display: grid;
  padding-inline: var(--space-small);
  position: relative;
}

.before-after-strip__grid {
  display: grid;
  gap: var(--space-small);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 15rem));
  justify-content: center;
  margin-inline: auto;
  width: min(100%, 49rem);
}

.before-after-strip__item {
  color: inherit;
  display: grid;
  justify-items: center;
  text-decoration: none;
  width: min(100%, 15rem);
}

.before-after__stack {
  position: relative;
  width: 100%;
}

.before-after-strip .before-after__item {
  display: block;
  margin: 0;
  position: relative;
}

.before-after-strip .before-after__item--before {
  left: clamp(0.35rem, 1.2vw, 0.65rem);
  pointer-events: none;
  position: absolute;
  top: clamp(0.35rem, 1.2vw, 0.65rem);
  width: min(33%, 4.75rem);
  z-index: 2;
}

.before-after-strip .before-after__item--before .before-after__image-wrap {
  aspect-ratio: 1 / 1;
  border: 0.16rem solid var(--color-canvas-light);
  box-shadow: var(--box-shadow);
  width: 100%;
}

.before-after-strip .before-after__item--after .before-after__image-wrap {
  aspect-ratio: 1 / 1;
  box-shadow: var(--box-shadow);
  width: 100%;
}

.before-after__zoom-link {
  color: inherit;
  display: block;
  text-decoration: none;
  width: 100%;
}

.before-after-strip__title {
  color: var(--color-ink-darker);
  font-size: var(--font-size-xxxx-small);
  letter-spacing: var(--letter-spacing);
  text-align: center;
}

.photo-set-strip {
  display: grid;
  padding-inline: var(--space-small);
  position: relative;
}

.photo-set-strip__grid {
  display: grid;
  gap: var(--space-medium);
  justify-content: center;
  margin-inline: auto;
  width: min(100%, 43em);
}

.photo-set-strip__item {
  color: inherit;
  display: grid;
  gap: 0.55em;
  justify-items: center;
  text-decoration: none;
  width: min(100%, 15.75em);
}

.photo-set-strip__frame {
  aspect-ratio: 4 / 5;
  background: var(--color-canvas-light);
  border-radius: var(--radius-panel);
  box-shadow: var(--box-shadow);
  display: grid;
  overflow: hidden;
  width: 100%;
}

.photo-set-strip__image {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  width: 100%;
}

.photo-set-strip__title {
  color: var(--color-ink-darker);
  font-size: var(--font-size-xxxx-small);
  letter-spacing: var(--letter-spacing);
  text-align: center;
}

@media (hover: hover) {
  .before-after__zoom-link .before-after__image-wrap {
    outline: 2px solid transparent;
    outline-offset: 1px;
    transition: outline-color var(--transition);
  }

  .before-after__zoom-link:focus .before-after__image-wrap,
  .before-after__zoom-link:hover .before-after__image-wrap {
    outline-color: oklch(var(--lch-blue-medium));
  }

  .photo-set-strip__frame {
    outline: 2px solid transparent;
    outline-offset: 1px;
    transition: outline-color var(--transition);
  }

  .photo-set-strip__item:focus .photo-set-strip__frame,
  .photo-set-strip__item:hover .photo-set-strip__frame {
    outline-color: oklch(var(--lch-blue-medium));
  }
}

.before-after--hero {
  gap: 0;
}

.before-after--hero .before-after__frame {
  background: transparent;
  border-radius: var(--radius-panel);
  box-shadow: none;
  overflow: clip;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
}

.before-after--hero .before-after__frame::before {
  content: none;
}

.before-after--hero .before-after__grid {
  gap: clamp(0.3rem, 1vw, 0.65rem);
  margin-inline: auto;
  max-width: 34em;
  width: min(100%, 34em);
}

.before-after--hero .before-after__image-wrap {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-panel);
}

.before-after--hero .before-after__item {
  align-content: start;
  gap: 0.6em;
}

.before-after--hero .before-after__label {
  background: oklch(var(--lch-ink-darkest) / 0.88);
  font-size: clamp(0.65rem, 0.95vw, 0.9rem);
  padding-inline: 1.15em;
}

.before-after--hero .before-after__image {
  object-position: center 18%;
}



@media(min-width: 48em) {

  .workspace-showcase__container {
    align-items: start;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .before-after__grid {
    gap: var(--space-neutral);
  }

  .before-after__grid--with-arrow {
    --before-after-arrow-size: clamp(2.7rem, 4.8vw, 4.25rem);
  }

}

@media(min-width: 64em) {
  .before-after {
    padding-inline: var(--space-large);
  }

  .before-after-strip {
    padding-inline: var(--space-large);
  }

  .photo-set-strip {
    padding-inline: var(--space-large);
  }

  .workspace-showcase {
    padding-inline: var(--space-large);
  }
}



@media(prefers-color-scheme: dark) {
  .before-after__arrow-art {
    filter: drop-shadow(0 0.5rem 1.25rem oklch(var(--lch-ink-dark) / 0.3));
  }
}