.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}

/* base image styling */
.gallery img {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  object-fit: cover;
  display: block;
}

/* wide (landscape) images take two columns */
.gallery img.landscape {
  grid-column: span 2;
}

/* vertical (portrait) images take one */
.gallery img.portrait {
  grid-column: span 1;
}

@media (max-width: 768px) {
  .gallery {
    display: block; /* disables the grid layout */
  }

  .gallery img {
    width: 100%;
    margin-bottom: 10px;
  }
}

h1 {
	margin-top: 15px !important;
	font-family: var(--title-font) !important;
}

.header {
	margin-bottom: 30px !important;
}