/* About page (/about/). Loaded only by that page, after application.css and orangecard.css. Layout comes from the
   main stylesheet's thoughtbot classes; this file holds About-only adjustments. */

/* "We don't just build for other people": the team's strongest point, so its text gets 7 of the 12 columns
   instead of the main stylesheet's 5. */
@media (min-width: 55em) {
  .about-products .text-and-list__text {
    grid-column: span 7;
  }
}

/* Team: six cut-out portraits on brand-orange tiles, three across, so no single photo is shown large. */
.about-team__photos {
  display: grid;
  gap: var(--spacing--x-small);
  grid-template-columns: repeat(3, 1fr);
}

.about-team__photos img {
  aspect-ratio: 1;
  background-color: var(--color--button-background);
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}