* {
  box-sizing: border-box;
  --burgundy: hsl(0, 98%, 35%);
  --burgundyshadow: hsl(0, 98%, 45%);
  --pagebackground: #f9f9f9;
  --contentyellow: #ffffcc;
}

.photos-grid {
  --column-count: 3;
  --row-count: 6;
  --column-size: 110px;
  --row-size: 110px;

  display: grid;
  justify-items: start;
  gap: .75rem;
  grid-template-columns: repeat(var(--column-count), var(--column-size)) 20px [list-start] 1fr [list-end];
  grid-template-rows: [list-start] .1rem repeat(var(--row-count),
      var(--row-size)) auto [list-end];

  position: relative;

  ul {
    grid-area: list;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--pagebackground);
    -o-object-fit: cover;
    object-fit: cover;
    border: 1px solid var(--burgundy);
    border-radius: 0.5rem;
    transition: 500ms;
  }

  a {
    text-decoration: none;
  }

  a:is(:hover, :focus) {
    background-color: var(--burgundy);
    color: var(--pagebackground);

    img {
      scale: 2;
      border-width: 3px;
      width: 100px;
      height: 100px;
      max-width: 100vw;
      z-index: 2;
    }
  }

  a:not(:hover, :focus) img {
    -webkit-animation: z-index-hack 500ms;
    animation: z-index-hack 500ms;
  }
}

@-webkit-keyframes z-index-hack {

  0%,
  100% {
    z-index: 1;
  }
}

@keyframes z-index-hack {

  0%,
  100% {
    z-index: 1;
  }
}

/* 1st column */
.photos-grid li:nth-child(3n + 1) img {
  grid-column: 1 / 2;
}

/* 2nd column */
.photos-grid li:nth-child(3n + 2) img {
  grid-column: 2 / 3;
}

/* 3rd column */
.photos-grid li:nth-child(3n + 3) img {
  grid-column: 3 / 4;
}

/* 1st row */
.photos-grid li:nth-child(-n + 3) img {
  grid-row: 2 / 3;
}

/* second row */
.photos-grid li:nth-child(n + 4):nth-child(-n + 6) img {
  grid-row: 3 / 4;
}

/* third row */
.photos-grid li:nth-child(n + 7):nth-child(-n + 9) img {
  grid-row: 4 / 5;
}

/* 4th row */
.photos-grid li:nth-child(n + 10):nth-child(-n + 12) img {
  grid-row: 5 / 6;
}

/* 5th row */
.photos-grid li:nth-child(n + 13):nth-child(-n + 15) img {
  grid-row: 6 / 7;
}

/* 6th row */
.photos-grid li:nth-child(n + 16):nth-child(-n + 18) img {
  grid-row: 7 / 8;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}


body {
  margin: 0;
  line-height: 1.0;
}

img {
  display: block;
}

.wrapper {
  /* width: min(100% - 4rem, 75ch); */
  margin-inline: auto;
  /* margin-top: 5rem; */
}