/* Four large panels, two up. Bigger than the Work tiles because these are
   the page's subject rather than an index of it. */
.panels {
  list-style: none; margin: var(--space-8) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8);
}
.panels__frame {
  display: block; position: relative; overflow: hidden;
  background: var(--off-white);
}
.panels__item img {
  aspect-ratio: 3 / 2; object-fit: cover; width: 100%; display: block;
}
/* The placeholder holds the panel's shape until the photograph arrives. The
   diagonal makes it legible as "nothing here yet" rather than a loading
   failure or a flat grey box. */
.panels__empty {
  display: block; aspect-ratio: 3 / 2;
  background:
    repeating-linear-gradient(
      135deg,
      var(--off-white) 0, var(--off-white) 10px,
      color-mix(in srgb, var(--rose-light) 30%, var(--off-white)) 10px,
      color-mix(in srgb, var(--rose-light) 30%, var(--off-white)) 20px
    );
}
.panels__title {
  margin-block: var(--space-4) var(--space-1); font-size: 1.5rem;
  text-align: center;
}
/* One short sentence, so it centres as a caption rather than reading as
   a paragraph that has been forced off its axis. */
.panels__blurb { color: var(--neutral); margin: 0; text-align: center; }

/* The brides' words. A pink hairline on the inline-start edge rather than a
   quotation mark glyph, which would need a different character per language. */
/* Columns are capped rather than 1fr: with auto-fit, a single quote would
   stretch to the full 1152px wrap and run to well over a hundred characters
   a line. 30rem keeps any number of quotes at a readable measure, and
   justify-content centres however many there are. */
.voices {
  list-style: none; margin: var(--space-8) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 30rem));
  justify-content: center;
  gap: var(--space-12);
}
.voices__quote {
  margin: 0; padding-inline-start: var(--space-6);
  border-inline-start: 2px solid var(--rose);
}
.voices__quote p {
  margin: 0; font-family: var(--font-heading);
  font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.55;
}
.voices__author {
  margin-block-start: var(--space-4); padding-inline-start: var(--space-6);
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--neutral);
}
.voices__detail { display: block; letter-spacing: 0.08em; }
[dir="rtl"] .voices__author {
  letter-spacing: 0; text-transform: none; font-size: 0.9375rem;
}
[dir="rtl"] .voices__detail { letter-spacing: 0; }

@media (max-width: 60rem) {
  .panels { grid-template-columns: 1fr; gap: var(--space-12); }
}

/* Centred prose, per the client. */
.voices__quote, .voices__quote p, .voices__author { text-align: center; }