/* General Styles */
html, body, header, .intro-4 {
  height: 100%;
}

body {
  font-family: "Anuphan", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

/* Small screens (up to 450px) */
@media (max-width: 450px) {
  .intro-4 {
    height: 700px;
  }
}

/* Medium-small screens (451px to 740px) */
@media (min-width: 451px) and (max-width: 740px) {
  .intro-4 {
    height: 500px;
  }
}

/* Medium-large screens (800px to 850px) */
@media (min-width: 800px) and (max-width: 850px) {
  .intro-4 {
    height: 550px;
  }
}

/* Carousel Styling */
.carousel-item img {
  height: 100vh; /* Full viewport height for large screens */
  object-fit: cover; /* Image scales without distortion */
  width: 100%; /* Ensure full width */
}

#carousel-example-1z {
  max-height: 100vh;
}

/* Medium screens (tablets, etc.) */
@media (max-width: 768px) {
  .carousel-item img {
    height: 70vh; /* Adjust height for medium screens */
  }
  #carousel-example-1z {
    max-height: 70vh;
  }
}

/* Small screens (phones, etc.) */
@media (max-width: 576px) {
  .carousel-item img {
    height: 60vh; /* Adjust height for small screens */
  }
  #carousel-example-1z {
    max-height: 60vh;
  }
}

/* Figure and Figcaption Styling */
figure {
    display: inline-block;
    width: auto; /* Figure adjusts based on content */
    margin: 0;
}

figure img {
    width: 100%; /* Image takes the full width of the figure */
    height: auto; /* Maintain image's aspect ratio */
    display: block; /* Remove any inline gap */
}

figure figcaption {
    width: 100% !important;
    text-align: center !important;
    font-size: 14px !important;
    margin-top: 8px !important;
    color: #333 !important;
}

@media (max-width: 768px) {
    figure figcaption {
        font-size: 12px !important;
    }
}

@media (max-width: 576px) {
    figure figcaption {
        font-size: 10px !important;
    }
}