/* Medium screens - 992 and below */
@media (max-width: 992px) {
  .map-container {
    aspect-ratio: 3/2;
  }

  h2.section-title-responsive.letter-spacing-large {
    font-size: 4rem !important;
  }

  /* h2.corner-title-responsive.letter-spacing-large {
    font-size: 3.5rem !important;
  } */
  .page-hero-section {
    padding: 2rem 0;
    min-height: auto;
  }

  .page-hero-headline {
    font-size: 2rem;
  }

  .page-hero-gallery.multiple-images {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .page-hero-gallery.multiple-images .page-hero-image-item:first-child {
    grid-column: 1;
    grid-row: 1;
  }

  .video-container {
    margin-bottom: 3rem;
  }

  .round-cta {
    width: 160px;
    border: 15px solid var(--bg);

    & h3 {
      font-size: calc(8px * 4);
    }
  }

  .col-lg-2-4 {
    width: 100%; /* 1 column on small screens */
  }

  /* Align section title with left edge of 2-column grid */
  .feature-grid-3-column-section .row .col-12 {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .feature-grid-3-column-section h2.section-title-responsive {
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* Override Bootstrap row margins for title alignment */
  .feature-grid-3-column-section .row:first-child {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .feature-grid-3-column-section .row:first-child .col-12 {
    padding-left: 0 !important;
  }

  /* Center last card in 2-column layout when odd number of items */
  .feature-grid-3-column-section
    .row:last-child
    .col-12:nth-child(3n + 1):nth-last-child(1) {
    grid-column: 1 / span 2;
    justify-self: center;
  }

  /* Apply consistent spacing to all feature grid layouts using Bootstrap classes */
  .feature-grid-3-column-section .col-sm-6,
  .feature-grid-4-column-section .col-md-6,
  .feature-grid-5-column-section .col-sm-6 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* Add margin bottom for consistent vertical spacing */
  .feature-grid-3-column-section .col-sm-6,
  .feature-grid-4-column-section .col-md-6,
  .feature-grid-5-column-section .col-sm-6 {
    margin-bottom: 1rem;
  }

  /* Center the last card if it's alone on the last row - for all grids */
  .feature-grid-3-column-section .row {
    display: flex;
    flex-wrap: wrap;
  }

  .feature-grid-4-column-section .row,
  .feature-grid-5-column-section .row {
    display: flex;
    flex-wrap: wrap;
  }

  /* Center the odd last item for all grid types */
  .feature-grid-3-column-section .col-sm-6:nth-child(odd):last-child,
  .feature-grid-4-column-section .col-md-6:nth-child(odd):last-child,
  .feature-grid-5-column-section .col-sm-6:nth-child(odd):last-child {
    margin-left: auto;
    margin-right: auto;
  }

  /* Fix feature block with images layout issues at tablet breakpoint */
  .feature-block-with-images-section .img-about {
    min-height: 300px !important; /* Fixed minimum height instead of 20vw */
  }

  .feature-block-with-images-section .btn {
    margin-bottom: 2rem; /* Add padding underneath buttons */
  }

  .feature-block-with-images-section .content-block-row {
    margin-bottom: 2rem !important; /* Extra spacing between content blocks */
  }

  .feature-top-margin {
    margin-top: 0rem !important;
  }

  .three-image-grid {
    &.large-left {
      grid-template-columns: 1fr 1fr;
      /* grid-template-rows: 1fr 1fr; */

      .large-image {
        grid-column: 1 / span 2;
      }

      .small-images {
        grid-column: 1 / span 2;
        grid-row: 3;
        flex-direction: row;
      }
    }
    &.large-right {
      grid-template-columns: 1fr 1fr;
      /* grid-template-rows: 1fr 1fr; */

      .large-image {
        grid-column: 1 / span 2;
        grid-row: 2;
      }

      .small-images {
        grid-column: 1 / span 2;
        grid-row: 1;
        flex-direction: row;
      }
    }
  }

  .mt-darker-bg {
    margin-top: 1rem;
}

}