section.archives {
  padding-top: var(--big-margin);
  padding-bottom: 148px;
}

section.archives .sectionTitle {
  padding: 0;
  margin-bottom: var(--med-margin);
}

section.archives > ul {
  display: flex;
  flex-direction: column;
  gap: var(--med-margin);
}

.event {
  position: relative;
  width: 100%;
  border-bottom-width: 0;
}

.event figure {
  border-color: var(--type-color);
}

.event > h2 {
  font-size: var(--tiny-font-size) !important;
  /* padding: 14px var(--small-margin); */
  padding: 12px;
  margin-bottom: 0 !important;
  border-left: 1px solid var(--type-color);
  transition:
    background-color 0.2s ease,
    letter-spacing 0.5s ease;
}

.event:hover > h2 {
  background-color: var(--base100);
  /* letter-spacing: 0.05em;
  padding-bottom: 26px; */
  border-color: var(--base100);
}

.event:hover > figure {
  border-color: var(--base100);
}

@media screen and (min-width: 580px) {
  section.archives > ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--small-margin);
  }
}

@media screen and (min-width: 768px) {
  section.archives > ul {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (min-width: 1024px) {
  section.archives {
    padding-left: var(--med-margin);
    padding-right: var(--med-margin);
  }
}

@media screen and (min-width: 1366px) {
  section.archives > ul {
    grid-template-columns: repeat(4, 1fr);
  }
}