/* Apply box-sizing globally */
*,
*::before,
*::after {
  box-sizing: border-box;
}

.h_home {
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.h_presentation {
  text-align: center;
  margin-bottom: 20px;
}

/* PC layout: 30%-40%-30% width, side-by-side, squares */
.h_home_grid {
  display: flex;
  justify-content: space-between;  /* Distribute boxes evenly with space between them */
  align-items: center; /* Vertically center the side-by-side blocks */
  width: 100%;
}

.h_home_box {
  background-color: rgba(0, 255, 255, 0.15); /* Aqua frosted effect */
  backdrop-filter: blur(10px) saturate(150%);
  border-radius: 12px;
  overflow: hidden;
  width: 27.5%; /* Default width */
  aspect-ratio: 1; /* Makes the box a square based on the width */
  box-shadow: 0 4px 15px rgba(0, 50, 120, 0.2), inset 0 1px 3px rgba(255, 255, 255, 0.5);
}

/* Larger center box */
.h_home_box_2 {
  width: 40%; /* Center box (40%) */
}

.h_home_box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile layout: O, O, O (stacked vertically) */
@media screen and (max-width: 768px) {
  .h_home_grid {
    flex-direction: column;  /* Stack boxes vertically on mobile */
    align-items: center;
  }

  .h_home_box {
    width: 100%;  /* Full width for mobile */
    height: auto;  /* Let height adjust based on content */
    margin-bottom: 10px;  /* Add space between boxes */
    aspect-ratio: unset; /* Remove the aspect ratio for mobile, allow free height adjustment */
  }

  .h_home_box_2 {
    height: auto; /* For mobile, center box is not bigger */
  }
}

/* Dark Theme Handling */
@media (prefers-color-scheme: dark) {
  .h_home_box {
    background-color: rgba(0, 255, 255, 0.3); /* Darker aqua frosted effect */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), inset 0 1px 3px rgba(0, 0, 0, 0.5);
  }
}