/* Screens no smaller than a large phone */

/****************************************
* Billboard
****************************************/

@keyframes content-grow {
  70% {
    width: calc(500px + 2rem);
    height: calc(100% + 2rem);
  }
  100% {
    transform: translate(-50%, -50%) skewX(-10deg);
    width: calc(500px + 2rem);
    height: calc(100% + 2rem);
  }
}

.billboard h1 {
  font-size: 40px;
}

/****************************************
* Photos grid
****************************************/

.photos.grid > img:first-of-type {
  grid-column: span 2;
}

.photos.grid.reverse > img:first-of-type {
  grid-column: span 1;
}

.photos.reverse.grid > img:last-of-type {
  grid-column: span 2;
}