main {
  column-count: 4;
  column-gap: 1.5rem;

  padding: 1rem;
  max-width: 65rem;
  margin: 0 auto;
}

main > img {
  width: 100%;
  height: auto;

  margin-bottom: 1.5rem;
  break-inside: avoid;
  border-radius: 0.375rem;
  display: block;

  position: relative;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

main > img:hover {
  transform: scale(1.05);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5);
  z-index: 10;
}

main > img:nth-of-type(1) {
  grid-area: journal1;
}
main > img:nth-of-type(2) {
  grid-area: journal2;
}
main > img:nth-of-type(3) {
  grid-area: journal3;
}
main > img:nth-of-type(4) {
  grid-area: journal4;
}
main > img:nth-of-type(5) {
  grid-area: journal5;
}
main > img:nth-of-type(6) {
  grid-area: journal6;
}
main > img:nth-of-type(7) {
  grid-area: journal7;
}
main > img:nth-of-type(8) {
  grid-area: journal8;
}
main > img:nth-of-type(9) {
  grid-area: journal9;
}
main > img:nth-of-type(10) {
  grid-area: journal10;
}

@media (max-width: 55.99em) {
  main > h2 {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 3.5rem;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.3rem;
    margin: 0;
    padding: 0;
    border-radius: 0;
    z-index: 100;
  }

  main {
    padding-left: 4.5rem;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "journal1 journal2"
      "journal3 journal4"
      "journal5 journal6"
      "journal7 journal8"
      "journal9 journal10";
  }
}

@media (min-width: 56em) {
  main {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, auto);
    grid-template-areas:
      "journal1 journal2 journal3 journal4"
      "journal5 title    title    journal6"
      "journal7 journal8 journal9 journal10";
  }

  main > h2 {
    grid-area: title;
    position: static;
    writing-mode: horizontal-tb;
    transform: none;
    height: auto;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    padding: 1rem;
    margin: 0;
    font-size: 2.3rem;
  }
}
a:hover {
  transform: scale(1.04);
}