.event-schedule-section {
  padding: 0;
}

.event-schedule {
  padding: var(--section-padding);
  background-color: var(--color-pickled-bluewood);
  color: var(--color-pure-white);
  font-size: 1.5rem;
  text-align: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  align-items: center;
  min-height: 30rem;
}

.event-subtitle {
  font-size: 2.75rem;
  font-style: italic;
  margin-bottom: 0.5rem;
  white-space: nowrap;
  letter-spacing: -0.002em;
}


.event-schedule p {
  text-transform: uppercase;
  font-size: 1.25rem;
}


.event-schedule {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "ceremony ceremony-image" "reception-image reception";
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.ceremony {
  grid-area: ceremony;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ceremony-image {
  grid-area: ceremony-image;
}

.reception {
  grid-area: reception;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reception-image {
  grid-area: reception-image;
}

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

.event-schedule img {
  max-height: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.event-schedule > * {
  position: relative;
  height: 100%;
  aspect-ratio: 1;
  overflow: hidden;
}

@media (max-width: 899px) {
  .event-schedule {
    grid-template-columns: 1fr;
    aspect-ratio: auto;
    grid-template-areas: "ceremony" "ceremony-image" "reception" "reception-image";
  }

  .event-schedule img {
    /* max-width: 100%; */
    max-height: 100%;
  }
}