.features {
  --features-articles-space: 2.5em;

  background: var(--color-white);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  display: grid;
  margin-inline: calc(-1 * var(--space-medium));
  margin-top: 2.5em;
  overflow: clip;
  position: relative;
}

.features__figures {
  aspect-ratio: 16 / 10;
  cursor: pointer;
  display: grid;
  overflow: clip;
}

.features__figures figure {
  filter: blur(0.1em);
  grid-area: 1 / 1;
  opacity: 0;
  transform: scale(1.05);
  transition:
    filter var(--transition-slow),
    opacity var(--transition-slow),
    transform var(--transition-slow)
  ;
  will-change: transform;
}

.features__figures figure.selected {
  filter: blur(0);
  opacity: 1;
  transform: scale(1);
}

.features__articles {
  backdrop-filter: blur(1em);
  -webkit-backdrop-filter: blur(1em);
  background: oklch(var(--oklch-white) / 0.85);
  bottom: 0;
  box-shadow: var(--box-shadow);
  height: auto;
  position: absolute;
  transition: height var(--transition);
}

.features__articles article {
  display: grid;
  filter: blur(0.1em);
  gap: var(--space-neutral);
  inset: auto 0 0 0;
  opacity: 0;
  padding: var(--features-articles-space);
  padding-right: 20em;
  pointer-events: none;
  position: absolute;
  text-wrap: pretty;
  transform: scale(0.97);
  transition:
    filter var(--transition-slow),
    opacity var(--transition-slow),
    transform var(--transition-slow)
  ;
  will-change: transform;
}

.features__articles article.selected {
  filter: blur(0);
  opacity: 1;
  pointer-events: auto;
  position: relative;
  transform: scale(1);
}

.features__articles article h2 {
  font-size: var(--font-size-large);
  font-weight: 600;
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height-tight);
  margin-bottom: -0.25em;
  margin-top: -0.2875em;
}

.features__articles article p {
  font-size: var(--font-size-medium);
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.4em;
  margin-top: -0.525em;
}

.features__buttons {
  bottom: 0;
  margin: var(--features-articles-space);
  position: absolute;
  right: 0;
}