.gallery-container {
  display: grid;
  grid-template:
    [row1-start] "header header" auto [row1-end]
    [row2-start] "image image" auto [row2-end]
    [row3-start] "navigation navigation" auto [row3-end]
    [row2-start] "content content" auto [row2-end]
    / 1fr 1fr;
  column-gap: 1rem;
  row-gap: 1rem;
  margin: 1rem 0;

  @media only screen and (min-width: 800px) {
    grid-template:
      [row1-start] "header header" auto [row1-end]
      [row2-start] "image content" auto [row2-end]
      [row3-start] "navigation navigation" auto [row3-end]
      / 1fr 1fr;
  }
}

.gallery-header {
  grid-area: header;
}

.gallery-header.margin-top-spacing-fix {
  margin-top: 1rem;
}

.gallery-header h1,
.gallery-header h2,
.gallery-header h3 {
  display: inline;
}

.gallery-container .gallery-image {
  grid-area: image;
  border: none;
}

.gallery-content {
  grid-area: content;
}

.gallery-navigation {
  grid-area: navigation;
  padding: 0.25rem 0.75rem;
  text-align: center;
}

.gallery-container .gallery-images {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1rem 0;
  justify-content: center;

  @media only screen and (min-width: 800px) {
    justify-content: left;
  }
}