/* LIVE Rosenau */

/*
TODO
- use vars for gap and grid-template-columns
*/

.event-related h2 {
  text-transform: none;
}
.event-related ul {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--gap);
}
@media screen and (min-width: 40em) {
  .event-related {
    display: grid;
  }
  .event-related h2 {
    border: none;
  }
}
@media screen and (min-width: 40em) and (max-width: 47.938em) {
  .event-related {
    gap: 0 var(--grid-6-gap);
    grid-template-columns: calc(2 * var(--grid-6-column) + 1 * var(--grid-6-gap)) calc(4 * var(--grid-6-column) + 3 * var(--grid-6-gap));
  }
}
@media screen and (min-width: 48em) {
  .event-related ul {
    display: grid;
    gap: 1rem var(--grid-12-gap);
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (min-width: 60em) {
  .event-related {
    border-top: 1px solid var(--color-neutral);
    padding-block-start: var(--margin-large);
    gap: 0 var(--grid-12-gap);
    grid-template-columns: calc(3 * var(--grid-12-column) + 2 * var(--grid-12-gap)) calc(9 * var(--grid-12-column) + 8 * var(--grid-12-gap));
  }
  .event-related ul {
    gap: 0 1.835%;
  }
}