.hero-background {
  /* Set the background image and use Jekyll's relative_url filter */
  background-image: url("../images/chingadero-neon.png");
  
  /* Adjust image properties */
  background-position: center; /* Centers the image */
  background-repeat: no-repeat; /* Prevents the image from tiling */

  /* Ensure the div has a height so the image is visible */
  height: 400px; /* Adjust height as needed */
  /* Add padding or other styles for content spacing */
  padding: 20px;
  color: white;
  text-shadow: 2px 2px 4px #e233bc;
  display: flex; /* Enables flexbox layout */
  flex-direction: column; /* Stacks children vertically */
  justify-content: flex-start;
  align-items: center; /* Centers children horizontally */
}

/* Posts section padding */
.page-content-body {
  padding: 40px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Responsive padding for mobile devices */
/* Desktop/tablet: fill width, accept some side-crop */
@media (min-width: 641px) {
  .hero-background {
    background-size: cover;
    min-height: clamp(240px, 45vh, 560px);
  }
}

/* Mobile: show the entire neon (no side-crop) */
@media (max-width: 640px) {
  .hero-background {
    background-size: contain;        /* show whole image */
    min-height: auto;
    padding-block: 12px;             /* breathing room above/below */
    background-color: #0b0c0f;       /* or your page bg to avoid gaps */
  }
}