/* LIVE Rosenau */

/*
TODO
- use vars for gap and grid-template-columns
- rules for gaps?
- unmerge event-related
*/

/*
@media screen and (max-width: 47.938em) {
  .teaser li:nth-last-child(-n+3) {
    display: none;
  }
}
@media screen and (min-width: 48em) and (max-width: 59.938em) {
  .teaser li:nth-last-child(-n+2) {
    display: none;
  }
}
*/

.flyer {
  display: grid;
  gap: 0 var(--grid-4-gap);
  /* grid-template-columns: 1fr 1fr; */
  grid-template-columns: repeat(2, 1fr);
}
@media screen and (max-width: 29.938em) {
  .event-related .flyer {
    display: block;
  }
  .event-related .flyer figure {
    display: none;
  }
}
@media screen and (min-width: 30em) and (max-width: 39.938em) {
  .event-related .flyer {
    gap: 0 var(--grid-6-gap);
    /* grid-template-columns: 29.526% 64.763%; */
    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: 40em) and (max-width: 47.938em) {
  .event-related .flyer {
    gap: 0 6.43%;
  }
}
@media screen and (min-width: 48em) {
  .flyer {
    gap: 0 2.78%;
  }
  .event-related .flyer {
    gap: 0 4.23%;
  }
}
@media screen and (min-width: 60em) {
  .flyer {
    gap: 0 4.23%;
  }
  .event-related .flyer {
    gap: 0 5.71%;
    grid-template-columns: 29.526% 64.763%;
  }
}