li {
  padding: 1rem;
}

.main-content {
  padding: 0;
  overflow: none;
}

li img {
padding:0;
max-width: 400px;
}

h2 {
  padding-bottom: var(--h2-bottom-padding);
  hyphens: auto;
  word-break:break-word;
}
h3.on-view {
  padding-bottom: 1.5rem;
}

h3.title {
  padding-top: 1.5rem;
}
 li a p{
  padding-bottom: var(--padding);
}

/* Reveal image on hover: collapsed by default */
.event-item .home-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
transition: max-height 900ms ease, opacity 900ms ease;

}

/* Remove space between the H3 elements flanking the image */
.event-item h3.on-view {
  margin: 0;
  padding-bottom: 1.5rem;
}
.event-item h3.title {
  margin: 0;
  padding-top: 1.5rem;
}

/* Show the image when the event is hovered or focused (keyboard accessible) */
.event-item:hover .home-image,
.event-item:focus-within .home-image {
  max-height: 70vh; /* adjust as needed */
  opacity: 1;
}

/* Optional: respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .event-item .home-image {
    transition: none;
  }
}

@media screen and (max-width: 59rem) {

  .home-columns li{
    padding-top: var(--padding);
    padding-left: var(--padding);
    padding-right: var(--padding);
  }

  
}
/* DESKTOP */
@media screen and (min-width: 45rem) {
  /* .header {
    height: 12.25vh;
    align-items: center;

  } */
  header {
    position: relative;
    /* z-index: 1000; */
    width: 100vw;
  }
  .main-content{
    height: 82.75vh;
  }
  footer {
    height: 5vh;
  }
  html, body {
    overflow: hidden; 
  
   }

   /* Make body a flex container */
    /* html, body {
      height: 100vh;
      margin: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden; 
    } */
      /* Prevents vertical scrolling */
    
      li img {
        /* padding: 1.5rem 0; */
        background-color: inherit;
        max-width: 400px;

      }
li {
  padding: 1.5%;
}



/* Title styling inside each event preview */
.event-column h2 {
  color: var(--h1-color, inherit);
}

/* Ensure event links also inherit the theme */
.event-column a {
  color: var(--font-color, inherit);
  text-decoration: none;
}

/* Add hover effect */
.event-column a:hover {
  opacity: 0.8;
}  
      /* Title styling inside each event preview */
      .event-column h2 {
        color: var(--h1-color);
      }
      
      /* Ensure event links also inherit the theme */
      .event-column a {
        color: var(--font-color);
        text-decoration: none;
      }
      
      .event-column a:hover {
        opacity: 0.8;
      }

    /* Remove gap on desktop for event headings */
    .event-item h3.on-view {
      margin: 0;
      padding-bottom: 1.5rem;
    }
    .event-item h3.title {
      margin: 0;
      padding-top: 1.5rem;
    }
}

/* @media screen and (min-width: 70rem) {
 
  header {
    height: 5vh
  }
  .main-content{
    height: 90vh;
  }
 footer {
  height: 5vh;
 }
} */