section#gallery-section.gallery-section {
  padding: 100px 0 150px;
  background: #f0f0f0;
  color: #000;
  font-family: var(--first-font-body);
  font-size: 18px;
  line-height: 20.7px;
}

section#gallery-section .container {
  max-width: 1280px;
  padding-right: 15px;
  padding-left: 15px;
}

/* The intro heading has no rules of its own, so it inherited typo-9.css's
   max-width: 960px with default left alignment. Centre it in the container. */
section#gallery-section .content-wrapper {
  text-align: center;
}

section#gallery-section .intro-heading {
  max-width: 960px;
  margin: 0 auto;
}

section#gallery-section .section-title,
section#gallery-section .section-subtitle {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

section#gallery-section .filter-categories {
  display: block;
  text-align: center;
}

/* The per-button pixel widths that used to live here (172.02px, 180.13px,
   339.14px, 216.98px) were measured against one specific set of four labels.
   This site has seven tabs with different text, so they broke words mid-phrase
   and overflowed. Let each button size to its own label and wrap as needed. */
section#gallery-section .filter-categories-wrapper {
  display: flex;
  min-height: 0;
  margin-bottom: 0;
  padding: 24px 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 30px;
  font-size: 0;
  text-align: center;
}

section#gallery-section .filter-categories-dropdown {
  display: none;
}

section#gallery-section .filter-btn {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 44px;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--first-primary);
  font-family: var(--first-font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 3px;
  text-align: center;
  text-transform: uppercase;
  vertical-align: top;
  cursor: pointer;
}

/* Active tab carries a short rule above and below the label, matching the
   neighborhood filter tabs. The button is a column flex so the two
   pseudo-elements stack with the label between them; ::before and ::after need
   content to generate a box at all. */
section#gallery-section .filter-btn {
  flex-direction: column;
}

section#gallery-section .filter-btn.active {
  color: var(--first-primary);
}

section#gallery-section .filter-btn.active::before,
section#gallery-section .filter-btn.active::after {
  content: "";
  display: block;
  width: 60px;
  height: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
  border-top: 1px solid currentColor;
}

section#gallery-section .filter-btn.active::before {
  margin: 0 auto 10px;
}

section#gallery-section .filter-btn.active::after {
  margin: 10px auto 0;
}
section#gallery-section .filter-btn:hover,
section#gallery-section .filter-btn:focus-visible {
  color: var(--first-primary);
  background: transparent;
}

section#gallery-section .gallery-grid.tab-content {
  display: none;
}

section#gallery-section .gallery-grid.tab-content.active {
  display: grid;
}

section#gallery-section .gallery-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 50px;
  font-size: 0;
  line-height: 0;
}

section#gallery-section .gallery-card {
  display: block;
  padding: 15px;
}

section#gallery-section .gallery-card img {
  width: 100%;
  height: 200.39px;
  object-fit: cover;
  object-position: 50% 50%;
}

@media (max-width: 1200px) {
  section#gallery-section .filter-categories-wrapper {
    height: auto;
    padding: 20px 0;
    align-content: flex-start;
    gap: 10px 22px;
  }

  section#gallery-section .filter-btn {
    min-height: 0;
    line-height: 18px;
  }

  section#gallery-section .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 20px;
  }
}

@media (max-width: 992px) {
  section#gallery-section.gallery-section {
    padding: 70px 0 100px;
  }

  section#gallery-section .filter-categories-wrapper {
    padding: 16px 0;
    gap: 10px 18px;
  }

  section#gallery-section .filter-btn {
    font-size: 13px;
    letter-spacing: 2px;
  }

  section#gallery-section .gallery-card {
    padding: 10px;
  }
}

@media (max-width: 767px) {
  section#gallery-section.gallery-section {
    padding-top: 0;
    padding-bottom: 100px;
  }

  section#gallery-section .filter-categories {
    display: none;
  }

  section#gallery-section .filter-categories-dropdown {
    display: block;
    margin: 0 15px 30px;
  }

  section#gallery-section .filter-dropdown {
    width: 100%;
    min-height: 48px;
    padding: 0 15px;
    border: 1px solid var(--first-primary);
    border-radius: 0;
    background: transparent;
    color: var(--first-primary);
    font: 700 14px/1 var(--first-font-body);
    letter-spacing: 2px;
    text-transform: uppercase;
  }

  section#gallery-section .gallery-grid {
    grid-template-columns: 1fr;
    margin-top: 0;
  }

  section#gallery-section .gallery-card {
    padding: 10px;
  }

  section#gallery-section .gallery-card img {
    height: 230px;
  }
}