/* ==========================================
   CAMPAIGN GALLERY
   ========================================== */

.gallery-section {
  padding: 90px max(7vw, 42px) 100px;
  background: #ffffff;
}

.gallery-heading {
  max-width: 900px;
  margin-bottom: 45px;
}

.gallery-heading .eyebrow {
  margin-bottom: 10px;
}

.gallery-heading h2 {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(58px, 6vw, 92px);
  font-weight: 900;
  line-height: 0.9;
  color: var(--navy);
}

.gallery-intro {
  max-width: 720px;
  margin: 22px 0 0;
  font-size: 17px;
  line-height: 1.7;
  color: #4c5d72;
}


/* ==========================================
   MASONRY GALLERY
   ========================================== */

.gallery-grid {
  column-count: 4;
  column-gap: 14px;
}

.gallery-item {
  width: 100%;
  margin-bottom: 14px;

  break-inside: avoid;
  -webkit-column-break-inside: avoid;

  overflow: hidden;
  background: #e9edf2;
}

.gallery-item img {
  display: block;

  width: 100%;
  height: auto;
}


/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 1100px) {

  .gallery-grid {
    column-count: 3;
  }

}


@media (max-width: 900px) {

  .gallery-section {
    padding-left: 30px;
    padding-right: 30px;
  }

  .gallery-grid {
    column-count: 2;
  }

}


@media (max-width: 600px) {

  .gallery-section {
    padding: 65px 18px 75px;
  }

  .gallery-heading {
    margin-bottom: 30px;
  }

  .gallery-heading h2 {
    font-size: 56px;
  }

  .gallery-intro {
    font-size: 16px;
  }

  .gallery-grid {
    column-count: 1;
  }

}