/*
 * Scrapbook collage shared by index.html and indexTest.html.
 * Add or adjust production collage photographs here without touching style.css.
 */

.support-page .scrapbook-collage {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  align-items: center;
  min-height: 690px;
  margin-top: 48px;
  padding: clamp(28px, 4vw, 58px) clamp(18px, 3vw, 42px);
  isolation: isolate;
}

.support-page .scrapbook-photo {
  position: relative;
  margin: 0;
  padding: clamp(7px, 1vw, 12px) clamp(7px, 1vw, 12px) clamp(22px, 2.4vw, 34px);
  background: #fff;
  border: 1px solid rgb(23 25 27 / 14%);
  box-shadow: 0 18px 42px rgb(5 47 73 / 24%);
}

.support-page .scrapbook-photo img {
  width: 100%;
  height: auto;
}

.support-page .scrapbook-photo-one {
  z-index: 3;
  grid-column: 4 / span 4;
  grid-row: 1;
  transform: translate(8px, 12px) rotate(-4deg);
}

.support-page .scrapbook-photo-two {
  z-index: 4;
  grid-column: 7 / span 4;
  grid-row: 1;
  transform: translateY(40px) rotate(7.5deg);
}

.support-page .scrapbook-photo-three {
  z-index: 3;
  grid-column: 10 / span 4;
  grid-row: 1;
  transform: translate(-8px, 20px) rotate(4deg);
}

.support-page .scrapbook-photo-four {
  z-index: 2;
  grid-column: 1 / span 4;
  grid-row: 1;
  transform: translate(-25px, 28px) rotate(-5deg);
}

/*
 * Photos five through eight make the second row. Their column positions
 * mirror the first row; the varied transforms create the scrapbook effect.
 */

.support-page .scrapbook-photo-five {
  z-index: 3;
  grid-column: 1 / span 4;
  grid-row: 2;
  transform: translate(-14px, -8px) rotate(4.5deg);
}

.support-page .scrapbook-photo-six {
  z-index: 4;
  grid-column: 1 / span 5;
  grid-row: 2;
  transform: translate(4px, 22px) rotate(-2deg);
}

.support-page .scrapbook-photo-seven {
  z-index: 3;
  grid-column: 6 / span 5;
  grid-row: 2;
  transform: translateY(-4px) rotate(3.5deg);
}

.support-page .scrapbook-photo-eight {
  z-index: 2;
  grid-column: 10 / span 4;
  grid-row: 2;
  transform: translate(10px, 24px) rotate(-4deg);
}

@media (max-width: 780px) {
  .support-page .scrapbook-collage {
    min-height: 520px;
    padding-inline: 12px;
  }
}

@media (max-width: 500px) {
  .support-page .scrapbook-collage {
    display: flex;
    min-height: 0;
    flex-direction: column;
    align-items: center;
    margin-top: 34px;
    padding: 24px 6px 48px;
    overflow: hidden;
  }

  .support-page .scrapbook-photo {
    width: min(88%, 400px);
  }

  .support-page .scrapbook-photo-one {
    z-index: 3;
    align-self: flex-end;
    margin-top: -38px;
    transform: rotate(3deg);
  }

  .support-page .scrapbook-photo-two {
    z-index: 4;
    width: min(96%, 440px);
    margin-top: -34px;
    transform: translateX(3%) rotate(2deg);
  }

  .support-page .scrapbook-photo-three {
    align-self: flex-end;
    margin-top: -38px;
    transform: rotate(3.5deg);
  }

  .support-page .scrapbook-photo-four {
    z-index: 2;
    align-self: flex-start;
    margin-top: 0;
    transform: rotate(-4.5deg);
  }

  .support-page .scrapbook-photo-five {
    align-self: flex-start;
    margin-top: -34px;
    transform: rotate(4deg);
  }

  .support-page .scrapbook-photo-six {
    align-self: flex-end;
    margin-top: -36px;
    transform: rotate(-3deg);
  }

  .support-page .scrapbook-photo-seven {
    z-index: 4;
    width: min(96%, 440px);
    margin-top: -34px;
    transform: translateX(2%) rotate(2deg);
  }

  .support-page .scrapbook-photo-eight {
    align-self: flex-start;
    margin-top: -38px;
    transform: rotate(-4deg);
  }
}