style.scss

:root {
  --page-padding: 1em;
  --grid-gap: 2em;

  @media screen and (max-width: 600px) {
    --page-padding: .5em;
    --grid-gap: 1em;
  }
}

body {
  font-family: Source Han Sans VF, Atkinson Hyperlegible, sans-serif;
  padding: var(--page-padding);
}

#google_translate_element,
#gtl {
  position: absolute;
  top: var(--page-padding);
  right: var(--page-padding);
}

.eventsContainer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
  margin: var(--grid-gap);
  margin-top: 2em;
  word-break: break-word;

  @media screen and (max-width: 600px) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.eventContainer {
  display: grid;

  img {
    max-width: 100%;
  }
}

.startDate {
  color: green;
}

.endDate {
  color: red;
}