/* crimson-text-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/crimson-text-v19-latin-regular.woff2') format('woff2');
}

* {
  box-sizing: border-box;
}

body {
  background-color: white;
  color: black;
  font-family: 'Crimson Text', serif;
  margin: 0;
  padding: 0 3vw 3vw;
}

main {
  margin: 0 auto;
  text-align: center;
}

h1, p {
  margin-inline: auto;
  max-width: 50rem;
}

h1 {
  font-size: clamp(2rem, 5vw, 2.5rem);
  font-weight: 400;
}

p {
  font-size: clamp(1.4rem, 3.5vw, 1.75rem);
  max-width: 50rem;
}

.top-band {
  margin-block-start: 5vw;
  border-block-start: solid 3vw #dde;
  padding-block-start: 5vw;
}



@media (max-width: 500px) {

  .photos * {
    margin-block-start: 5vw;
  }

  .photos > * > img {
    display: block;
    height: auto;
    width: 100%;
  }

  .photos.row-bike {
    margin-block: 20vw;
  }
}



@media not all and (max-width: 500px) {

  .photos {
    display: grid;
    gap: 3vw;
    margin-block-start: 3vw;
  }

  .photos.c-1 {
    grid-template-columns: 1fr;
  }
  .photos.c-2 {
    grid-template-columns: 1fr 1fr;
  }

  .photos.row-1 {
    grid-template-rows: min(50vw, 1600px);
  }
  .photos.row-2 {
    grid-template-rows: min(32vw, 1200px);
  }
  .photos.row-3 {
    grid-template-rows: min(45vw, 1512px);
  }
  .photos.row-4 {
    grid-template-rows: min(48vw, 2016px);
  }
  .photos.row-5 {
    grid-template-rows: min(32vw, 966px);
  }
  .photos.row-6 {
    grid-template-rows: min(40vw, 980px);
  }
  .photos.row-bike {
    grid-template-rows: min(50vw, 450px);
    margin-block: 9vw;
  }
  .photos.row-7-8 {
    grid-template-columns: 43fr 13.5fr 6fr 22.5fr;
    aspect-ratio: 94 / 57;
    grid-template-areas:
      'p78L p7M p7M p7R'
      'p78L p8M p8R p8R';
  }
  .photos.row-9 {
    grid-template-columns: 67fr 24fr;
    aspect-ratio: 94 / 32;
  }
  /* ... */


  .photos > * {
    background-repeat: no-repeat;
    width: 100%;
  }

  .photos:not(.row-7-8, .row-9) > * {
    background-size: contain;
  }

  .photos:where(.row-7-8, .row-9) > * {
    background-size: cover;
  }

  .photos > .left {
    background-position: right center;
  }
  .photos > .right {
    background-position: left center;
  }
  .photos > .full,
  .photos > .interior {
    background-position: center;
  }

  .photos img {
    display: none;
  }

  .p1L { background-image: url('photos/1L.jpg'); }
  .p1R { background-image: url('photos/1R.jpg'); }
  .p2L { background-image: url('photos/2L.jpg'); }
  .p2R { background-image: url('photos/2R.jpg'); }
  .p3 { background-image: url('photos/3.jpg'); }
  .p4L { background-image: url('photos/4L.jpg'); }
  .p4R { background-image: url('photos/4R.jpg'); }
  .p5 { background-image: url('photos/5.jpg'); }
  .p6 { background-image: url('photos/6.jpg'); }
  .p-bike { background-image: url('photos/bike.jpg'); }
  .p78L { grid-area: p78L; background-image: url('photos/78L.jpg'); }
  .p7M { grid-area: p7M; background-image: url('photos/7M1.jpg'); }
  .p7R { grid-area: p7R; background-image: url('photos/7R.jpg'); }
  .p8M { grid-area: p8M; background-image: url('photos/8M.jpg'); }
  .p8R { grid-area: p8R; background-image: url('photos/8R.jpg'); }
  .p9L { background-image: url('photos/9L.jpg'); }
  .p9R { background-image: url('photos/9R.jpg'); }

}