/* material-focus.css — zoom plein cadre sur une matière, légende discrète en surimpression. */
.material-focus{
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--color-gray-200);
}
.material-focus img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.material-focus__caption{
  position: absolute;
  left: var(--space-5);
  bottom: var(--space-5);
  right: var(--space-5);
  color: var(--color-white);
  max-width: 30ch;
}
.material-focus__kicker{
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--color-white);
  opacity: .85;
  margin-bottom: var(--space-2);
}
.material-focus__title{
  font-family: var(--font-serif);
  font-size: 1.75rem;
  color: var(--color-white);
}
.material-focus__desc{
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  color: rgba(255,255,255,.85);
}
.material-focus__caption .btn{ margin-top: var(--space-4); }