/* ./css/responsivelayout.css */

/* Media query for screens smaller than 768px (tablets and phones) */
@media (max-width: 768px) {

  /* --- Header Responsiveness --- */
  
  /* Target the container for the logo and title */
  #section0 .logo {
    display: flex;          /* Use flexbox for better alignment */
    flex-direction: column; /* Stack items vertically */
    align-items: center;    /* Center-align all items */
    text-align: center;     /* Center-align the text */
  }

  /* Adjust the main title font size for mobile */
  #section0 .title0 {
    font-size: 1.2rem; /* Make font smaller */
    line-height: 1.4;  /* Improve readability */
  }

  /* Adjust the subtitle (h6) */
  #section0 .logo h6 {
    margin: 0;         /* Remove extra space around the subtitle */
    font-size: 0.9rem;
  }

  /* --- Featured Images Responsiveness --- */

  .featureimg {
    flex-direction: column; /* Stack the figures vertically instead of side-by-side */
    align-items: center;    /* Center the figures in the container */
    margin-left: 10px;      /* Reduce side margins */
    margin-right: 10px;
  }

  /* Make sure images scale down and don't overflow their container */
  .featureimg figure img {
    max-width: 100%; /* Ensures the image is never wider than its container */
    height: auto;    /* Maintains the image's aspect ratio */
  }
}

/* Pinpoint fix for the gap between the welcome header and paragraph on mobile */
@media (max-width: 768px) {
    #info-section h1 {
        margin-bottom: 2px;
        /* Drastically reduces the space below the main heading */
        font-size: 1.8rem;
        /* Also makes the heading a bit smaller to fit mobile */
    }

    #info-section p {
        margin-top: 0;
        /* Removes the space above the paragraph */
    }
}