div.nav-holder {
  grid-column: 1/16;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 3em;
  font-weight: normal; }
  div.nav-holder a span {
    border-bottom: 1px solid currentColor;
    padding-bottom: 0.8em; }
  div.nav-holder a[inactive] {
    opacity: 0.3; }

div.event-container {
  grid-column: 1/16;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  background-image: url("/assets/graphics/pat.svg");
  background-size: 11.35rem;
  background-position: top 27vw left 0; }
  @media (max-width : 900px) {
    div.event-container {
      grid-template-columns: repeat(1, 1fr); } }
  div.event-container div {
    width: 100%;
    height: calc((100vw - (2 * var(--pm))) * 0.470588235);
    position: relative;
    background-color: var(--white); }
    div.event-container div:first-of-type, div.event-container div:nth-of-type(2), div.event-container div:nth-of-type(3) {
      background-color: var(--black);
      color: var(--white); }
    div.event-container div[info] {
      padding: var(--ss);
      padding-bottom: calc(2 * var(--ss));
      display: flex;
      flex-direction: column;
      justify-content: space-between; }
      div.event-container div[info] article p {
        margin-bottom: 1em; }
      div.event-container div[info] a.ticket {
        display: block;
        width: fit-content; }
        div.event-container div[info] a.ticket span {
          border-bottom: 1px solid currentColor;
          padding-bottom: 0.8em; }
    div.event-container div[empty] {
      background-color: transparent; }
    div.event-container div[title] h2 {
      font-family: 'SoehneBreit';
      letter-spacing: 0.2em;
      font-weight: normal;
      font-size: var(--fl);
      text-transform: uppercase;
      position: absolute;
      transform: rotate(180deg);
      writing-mode: vertical-rl;
      right: var(--pm);
      top: var(--ss); }
      @media (max-width : 900px) {
        div.event-container div[title] h2 {
          font-size: 1.75rem; } }
      @media (max-width: 1050px) {
        div.event-container div[title] h2 {
          height: min-content; } }
    div.event-container div .aspectholder {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: initial;
      z-index: 1;
      opacity: 1;
      transition: opacity var(--timing); }
      div.event-container div .aspectholder img {
        position: absolute;
        top: 0;
        left: 0;
        object-fit: cover;
        object-position: center;
        height: 100%;
        width: 100%; }
    @media (max-width : 900px) {
      div.event-container div {
        height: calc((100vw - (2 * var(--ph))) * 1.41492); }
        div.event-container div[info] {
          padding: var(--ph); }
        div.event-container div[title] {
          display: none; }
        div.event-container div[empty] {
          display: none; } }