body {
  background: var(--bg-color);
  color: var(--text-color);
  font-family: "Poppins", sans-serif;
  font-size: 16px;
}

.layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px 16px;
}

/* Header */

.page-header {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: var(--content-width);
  height: 200px;
}

.header-title {
  font-size: 32px;
  font-weight: 700;
}

/* Main + galleries */

main {
  width: 100%;
  max-width: var(--content-width);
}

.gallery {
  margin-bottom: 64px;
}

.gallery:last-child {
  margin-bottom: 0;
}

.gallery-header {
  margin-bottom: 32px;
}

.gallery-title {
  font-size: 32px;
  font-weight: 400;
  text-transform: lowercase;
}

.date {
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.half {
  /* I don't think this is strictly necessary */
  grid-column: span 1;
}

.full {
  grid-column: span 2;
}

.photograph {
  width: 100%;
  height: auto;
}

/*
Source: https://codepen.io/nxworld/pen/ZYNOBZ
A hover effect to spice things up
*/
/* .hover-opacity img {
  opacity: 1;
  transition: 0.2s ease-in-out;
}

.hover-opacity img:hover {
  opacity: 0.75;
} */

/* Footer */

footer {
  display: flex;
  align-items: center;

  width: 100%;
  max-width: var(--content-width);

  height: 200px;
}

.about-link {
  font-size: 40px;
}

/* Links */

a {
  outline: none;
  text-decoration: underline;
}

a:link {
  color: black;
}

a:visited {
  color: black;
}

a:focus {
  background: black;
  color: rgb(255, 255, 255);
}

a:hover {
  background: black;
  color: rgb(255, 255, 255);
}

a:active {
  background: black;
  color: rgb(255, 255, 255);
}

/* Responsiveness */

@media (max-width: 600px) {
  .layout {
    padding: 0px 8px;
  }

  .gallery-grid {
    gap: 24px;
  }
}