:root {
  --primary_green: #4e702d;
  --h3_heading: 27px;
  --h1_heading: 45px;
  --h2_heading: 45px;
  --p_text: 19px;

  /* Mobile font sizes */
  --mobile_h1_heading: 35px;
  --mobile_h2_heading: 35px;
  --mobile_h3_heading: 22px;
  --mobile_p_text: 16px;
}

/* Gallery Section Styles */
.gallery_section {
  padding: 80px 20px;
  background-color: #f9f9f9;
}

.gallery_content {
  max-width: 80%;
  margin: 0 auto;
  text-align: center;
}

.gallery_subtitle {
  font-weight: 500;
  margin-bottom: 15px;
  text-align: center;
}

.gallery_heading {
  margin-bottom: 30px;
  text-align: center;
}

.gallery_paragraph {
  max-width: 800px;
  margin: 0 auto 50px;
  text-align: center;
  color: #3b3b3b;
}

/* Gallery placeholder styles (optional) */
#gallery_placeholder {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-auto-rows: 240px;
  justify-content: center;
  align-items: stretch;
  min-height: 200px;
}

#gallery_placeholder img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s;
  border-radius: 0;
}

.image-mosaic {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-auto-rows: 240px;
  margin-bottom: 2rem;
  border-left: #78ac41 3px solid;
  padding-left: 1rem;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #353535;
  font-size: 3rem;
  color: #fff;
  box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
  height: 100%;
  width: 100%;
  border-radius: 4px;
  transition: all 500ms;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
  margin: 0;
}

@media screen and (min-width: 600px) {
  .card-tall {
    grid-row: span 2 / auto;
  }

  .card-wide {
    grid-column: span 2 / auto;
  }
}

@media screen and (max-width: 600px) {
  #gallery_placeholder {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    grid-auto-rows: 140px;
  }
}

@media (max-width: 750px) {
  section.gallery_section {
    padding: 0;
  }

  h1 {
    font-size: var(--mobile_h1_heading);
    text-align: center;
  }

  h3 {
    font-size: var(--mobile_h3_heading);
    text-align: center;
  }

  h2 {
    font-size: var(--mobile_h2_heading);
    text-align: center;
  }

  p {
    font-size: var(--mobile_p_text);
    text-align: center;
  }
}