/* ===========================
   About Page - Star Import
   =========================== */

/* 1) Hero Image Section */
#about-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* If you want a min-height, you can specify:
       min-height: 60vh; 
       or something else. 
    */
  }
  
  .about-hero-image {
    width: 100%;
    max-height: 600px;
    overflow: hidden; /* ensures any zoom stays within the container */
  }
  
  .about-hero-image img {
    width: 100%;
    display: block;
    transition: transform 0.4s ease;
  }
  
  /* Slight zoom on hover */
  .about-hero-image:hover img {
    transform: scale(1.01);
  }
  
  /* 2) About Intro Text */
  #about-intro {
    background-color: #ffffff;
    padding: 2rem 1rem;
  }
  
  #about-intro .container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  #about-intro h2 {
    font-size: 2.75rem;
    text-align: center;
    color: #1A3C8D;
    margin-bottom: 1rem;
    font-family: 'Libre Baskerville', serif;
  }
  
  #about-intro p {
    font-size: 1.25rem;
    line-height: 1.6;
    color: #333333;
    margin-bottom: 1rem;
    text-align: center;
  }
  
  /* 3) 2x2 Image Gallery */
  #about-gallery {
    background-color: #f9f9f9;
    padding: 2rem 1rem;
  }
  
  #about-gallery .container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  /* 
     Create a 2x2 grid for big images.
     If you want them to all have the same height, 
     we rely on each image having roughly the same aspect ratio or 
     use object-fit: cover. 
  */
  .gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columns */
    grid-template-rows: 1fr 1fr;    /* 2 rows */
    gap: 1.5rem;
  }
  
  /* Each gallery item is a container for the image */
  .gallery-item {
    position: relative;
    overflow: hidden;
  }
  
  .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ensures images fill the container without distortion */
    display: block;
  }
  
  /* 
     If you want a hover effect on the gallery images, 
     you can add something like a subtle zoom or shadow:
  */
  .gallery-item img {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
  }
  
  .gallery-item:hover img {
    transform: scale(1.02);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  }
  
  /* 
     Responsive adjustments
     If screen is small, you can stack them in one column or keep them 2 wide
  */
  @media (max-width: 768px) {
    .gallery-grid {
      grid-template-columns: 1fr; /* single column on smaller screens */
      grid-template-rows: auto;
    }
  }