.events {
  grid-template-columns: 1fr;
  grid-template-rows: min-content min-content;
}
.event-list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  gap: clamp(
    calc(var(--padding-standard) * 1),
    3dvw,
    calc(var(--padding-standard) * 2)
  );
}
.event-list > div:not(:first-child):not(:has(*)) {
  background-image: var(--gradient-main);
  border-radius: calc(var(--radius-corner) * 1);
  box-shadow: var(--bg-box-shadow-dim);
  width: 100%;
  padding: calc(var(--padding-standard) * 2);
  display: grid;
  justify-content: center;
  align-items: center;
  font-weight: 600;
}
.event-list > div:not(:first-child) {
  display: flex;
  align-items: stretch;
  width: 100%;
  gap: clamp(
    calc(var(--padding-standard) * 1),
    3dvw,
    calc(var(--padding-standard) * 2)
  );
  flex-wrap: wrap;
}
.event-list > div:not(:first-child) > div:first-child,
.event-list > div:not(:first-child) > div:last-child .flip-card-front,
.event-list > div:not(:first-child) > div:last-child .flip-card-back {
  background-image: var(--gradient-main);
  border-radius: calc(var(--radius-corner) * 1);
  box-shadow: var(--bg-box-shadow-dim);
}
.event-list > div:not(:first-child) > div:first-child {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-grow: 3;
  padding: clamp(
    calc(var(--padding-standard) * 1),
    3dvw,
    calc(var(--padding-standard) * 3)
  );
  flex-wrap: wrap;
  overflow: hidden;
}
.event-list > div:not(:first-child) > div:first-child > a {
  height: clamp(12rem, 15dvw, 15rem);
  width: clamp(12rem, 15dvw, 15rem);
}
.event-list > div:not(:first-child) > div:first-child > a > img {
  height: 100%;
  width: 100%;
  filter: var(--drop-shadow-event-overview-logo);
  object-fit: contain;
}
.event-list > div:not(:first-child) > div:first-child > div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: clamp(25rem, 80dvw, 40rem);
  gap: var(--padding-standard);
}
.event-list > div:not(:first-child) > div:first-child > div > h3 {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(
    calc(var(--text-font-size-medium) * 0.5),
    3.5dvw,
    calc(var(--text-font-size-medium) * 1)
  );
  gap: 0.5ch;
  text-wrap: nowrap;
}
.event-list > div:not(:first-child) > div:first-child > div p {
  font-size: clamp(
    calc(var(--text-font-size-medium) * 0.5),
    2.6dvw,
    calc(var(--text-font-size-medium) * 0.8)
  );
}
.event-list > div:not(:first-child) > div:last-child .flip-card-front,
.event-list > div:not(:first-child) > div:last-child .flip-card-back {
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.event-list > div:not(:first-child) > div:last-child .flip-card-front {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: clamp(
    calc(var(--padding-standard) * 1),
    3dvw,
    calc(var(--padding-standard) * 3)
  );
  gap: calc(var(--padding-standard) * 3);
}
.event-list > div:not(:first-child) > div:last-child .flip-card-back {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: calc(var(--padding-standard) * 3);
  transform: rotateY(180deg);
}
.event-list > div:not(:first-child) > div:last-child .flip-card-back p {
  justify-self: end;
  text-align: right;
  text-wrap: wrap;
  font-size: var(--text-font-size-small);
}
.event-list
  > div:not(:first-child)
  > div:last-child
  .flip-card-back
  > p:first-child {
  justify-self: center;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.event-list
  > div:not(:first-child)
  > div:last-child
  .flip-card-back
  > p:first-child
  strong {
  font-weight: 600;
}
.event-list
  > div:not(:first-child)
  > div:last-child
  .flip-card-back
  > p:first-child
  span {
  color: var(--bg-color-accent);
}
.event-list
  > div:not(:first-child)
  > div:last-child
  .flip-card-back
  > div:nth-child(2):not(:only-child) {
  display: grid;
  align-content: start;
  height: 60%;
  width: 90%;
  overflow-y: auto;
  margin-top: 5%;
}
.event-list
  > div:not(:first-child)
  > div:last-child
  .flip-card-back
  > div:nth-child(2)
  > p {
  font-size: var(--text-font-size-small);
  justify-self: end;
  padding-inline: clamp(
    calc(var(--padding-standard) * 1),
    3dvw,
    calc(var(--padding-standard) * 3)
  );
  text-align: right;
}
.event-list
  > div:not(:first-child)
  > div:last-child
  .flip-card-back
  > div:nth-child(2)
  > p
  > span:last-child {
  text-wrap: nowrap;
}
.event-list
  > div:not(:first-child)
  > div:last-child
  .flip-card-back
  > div:first-child
  > p.hangover:not(:first-child) {
  justify-self: start;
  padding-inline: calc(var(--padding-standard) * 4);
}
.event-list
  > div:not(:first-child)
  > div:last-child
  .flip-card-back
  > div:first-child
  > p:first-child {
  justify-self: center;
}
.event-list
  > div:not(:first-child)
  > div:last-child
  .flip-card-back
  > div:first-child
  > p:first-child:not(:only-child) {
  margin-bottom: calc(var(--padding-standard) * 2);
}
.event-list
  > div:not(:first-child)
  > div:last-child
  .flip-card-front
  > .flip-button-front {
  position: absolute;
  writing-mode: vertical-rl;
  right: 0.5rem;
  opacity: 0.2;
  cursor: pointer;
}
.event-list
  > div:not(:first-child)
  > div:last-child
  .flip-card-back
  > .flip-button-back {
  position: absolute;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  left: 0.5rem;
  opacity: 0.2;
  cursor: pointer;
}
.event-list > div:not(:first-child) > div:last-child button {
  color: var(--text-color);
  font-size: var(--text-font-size-medium);
  border-radius: var(--radius-corner);
  padding-inline: calc(var(--padding-standard) * 2);
  padding-block: calc(var(--padding-standard));
  box-shadow: var(--bg-box-shadow-dim);
  text-shadow: none;
  text-align: center;
  width: 10rem;
  transition:
    translate 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out,
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out;
}
.event-list
  > div:not(:first-child)
  > div:last-child
  .flip-card-front
  > h3.qualified {
  padding-block: calc(var(--padding-standard) * 1);
  padding-inline: calc(var(--padding-standard) * 2);
  border-radius: var(--radius-corner);
  box-shadow:
    inset 0rem 0rem 0.4rem 0.1rem var(--bg-color-accent);
}
.event-list
  > div:not(:first-child)
  > div:last-child
  .flip-card-front
  > button.register {
  background-color: var(--bg-color-register);
}
.event-list
  > div:not(:first-child)
  > div:last-child
  .flip-card-front
  > button.unregister {
  background-color: var(--bg-color-unregister);
}
.event-list
  > div:not(:first-child)
  > div:last-child
  .flip-card-front
  > button.disabled {
  color: var(--text-color-disabled);
  background-color: var(--bg-color-disabled);
  pointer-events: none;
  cursor: default;
}
@media (hover: hover) {
  .event-list
    > div:not(:first-child)
    > div:last-child
    .flip-card-front
    > button:hover {
    translate: 0rem -0.1rem;
    box-shadow: var(--bg-box-shadow);
  }
  .event-list
    > div:not(:first-child)
    > div:last-child
    .flip-card-front
    > button:active {
    translate: 0rem 0rem;
    box-shadow: var(--bg-box-shadow-dim);
  }
}
.event-list > div:not(:first-child) > div:first-child > div a {
  color: var(--text-color);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--padding-standard);
  text-wrap: nowrap;
}
.event-list > div:not(:first-child) > div:first-child > div p svg,
.event-list > div:not(:first-child) > div:first-child > div p img {
  height: clamp(
    var(--text-font-size-small),
    3dvw,
    var(--text-font-size-medium)
  );
  filter: drop-shadow(var(--text-shadow));
  transition: translate 0.15s ease-in-out;
}
@media (hover: hover) {
  .event-list > div:not(:first-child) > div:first-child > div p:hover svg,
  .event-list > div:not(:first-child) > div:first-child > div p:hover img {
    translate: 0rem -0.2rem;
  }
  .event-list > div:not(:first-child) > div:first-child > div p:active svg,
  .event-list > div:not(:first-child) > div:first-child > div p:active img {
    translate: 0rem 0rem;
  }
}
.event-list span {
  color: var(--bg-color-accent);
}
.event-list strong {
  font-weight: 600;
}
.event-list strong > span.thin {
  font-weight: 400;
  color: var(--text-color);
}
.event-list strong > strong {
  font-weight: 1000;
}
.event-list em {
  font-style: italic;
}
.flip-card {
  background-color: transparent;
  width: 20rem;
  min-height: 12rem;
  perspective: 1000px;
  flex-grow: 1;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.5s;
  transform-style: preserve-3d;
}
.flip-card.flipped .flip-card-inner {
  transform: rotateY(-180deg);
}