/* Edited 4/3 4:40pm */

/* Edited 3/26 3:30pm */

/* Edited 3/25 4:35pm */

h2 {
  padding-block-end: var(--small-padding);
  /* padding-inline-start: var(--padding-regular) */
    hyphens: auto;
    word-break:break-word;

}

h3 {
  /* padding-block-end: var(--small-padding); */
  text-transform: uppercase;
  /* margin-block-end: var(--padding-regular); */
  /* position: sticky; */
}

.h3 {
  background-color: var(--theme1-beige);
  color: var(--theme1-purple);
  margin-block-end: var(--padding-regular);
  padding-left: var(--padding);
}

h3#upcoming {
  background-color: var(--theme1-salmon);
  color:  var(--theme1-cream);
  position: sticky;
  /* top: 50px; */
}
li img {
  padding-top: var(--small-padding);
  object-fit: cover;
}

.event-image {
  aspect-ratio: 4/4;

}


/* .scroll {
  display: grid ;
  overflow-x: scroll;
  padding-inline-start: var(--padding-regular);
  padding-inline-end: var(--padding-regular);
gap: var(--padding-regular);
} */

.main-content {
  padding: 0;
  overflow: hidden;  
}
.grid {
  display: grid ;
  padding-inline-start: var(--padding);
  padding-inline-end: var(--padding);
  /* overflow: scroll; */
  /* background-color: pink; */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-template-rows: 4;
  gap: var(--padding-regular);

}

.past-events-link.h3{
  padding: var(--padding);
  margin-block-end: 0;
}

.past-events-link.h3:hover{
background-color: var(--theme1-purple);
  color: var(--theme1-cream);
}

@media screen and (min-width: 45rem) {


  .main-content {
      position: relative;
      /* flex: 1; */
      display: inline-block;
      height: auto;
      overflow: hidden;
      padding: 0;
    }

  .upcoming-events {
    padding-bottom: 2rem;
    width: 100vw;
  }
 
  .past-events {
    width: 100vw;
  }
  
  .grid-2 {
    /* overflow: scroll; */
    display: grid;
    overflow-y: scroll;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

  }
}