.event-series {
  background: var(--surface-secondary-default-subtle, #f2f4f5);
  display: flex;
  justify-content: center;
  padding: 56px;
}

.event-series__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1320px;
  width: 100%;
  padding: 0 24px;
}

.event-series__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.event-series__title {
  color: var(--text-default-headings, #0d0f11);
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
  margin: 0;
}

.event-series__subtitle {
  color: var(--text-default-capiton, #505964);
  font-size: 20px;
  font-weight: 400;
  line-height: 32px;
  margin: 0;
}

.event-series__grid {
  /*columns: 3;*/
  /*column-gap: 48px;*/
  /*column-rule: 1px solid var(--border-default, #cfd5dc);*/
  
  display:grid;
  grid-template-columns: repeat(3,1fr);
  column-gap:48px;
}

/* Card */
.event-series__card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 8px;
  background: var(--surface-default, #fff);
  border: 1px solid var(--border-default, #cfd5dc);
  border-radius: var(--border-radius-cards-top-left, 8px) var(--border-radius-cards-top-right, 8px) var(--border-radius-cards-bottom-right, 8px) var(--border-radius-cards-bottom-left, 8px);
  text-decoration: none;
  color: inherit;
  break-inside: avoid;
  margin-bottom: 16px;
  transition: border-color 0.2s ease;
}

.event-series__card::after{
  content:"";
  position:absolute;
  left:-24px;
  top:0;
  bottom:0;
  width:1px;
  background:var(--border-default, #cfd5dc);
}

.event-series__card:first-child::after,.event-series__card:nth-child(3n + 1)::after{
  display:none
}

.event-series__card:hover,
.event-series__card:focus-visible {
  border-color: var(--border-primary-default-hover, #16959f);
  outline: none;
}

.event-series__card:focus-visible {
  box-shadow: 0 0 0 3px rgba(22, 149, 159, 0.3);
}

.event-series__card:hover .event-series__card-arrow,
.event-series__card:focus-visible .event-series__card-arrow {
  background: var(--surface-primary-default-subtle-hover, #d7eaeb);
  border-color: var(--border-primary-default-subtle-hover, #85bfc5);
  box-shadow:
    0 0 0 4px rgba(106, 125, 140, 0.2),
    0 0 1px 1px rgba(106, 125, 140, 0.15),
    0 0 0 1px rgba(106, 125, 140, 0.6),
    0 0 4px 0 rgba(106, 125, 140, 0.1);
}

.event-series__card:hover .event-series__card-arrow .material-icons,
.event-series__card:focus-visible .event-series__card-arrow .material-icons {
  color: var(--text-primary-default, #16959f);
}

.event-series__card--active {
  /*outline: 2px solid var(--surface-primary-default, #16959f);*/
  border-color: var(--border-primary-default-hover, #16959f);
  outline-offset: -2px;
}

/* Date box */
.event-series__date-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  min-width: 64px;
  height: 64px;
  background: var(--surface-default-secondary, #f7fafd);
  padding: 8px;
  text-align: center;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: var(--border-radius-global-100, 4px);
}

.event-series__date-month {
  display: block;
  font-weight: 700;
  color: var(--text-default-headings, #0d0f11);
  width: 100%;
  text-align: center;
  font-family: var(--font-style-body, Merriweather);
  font-size: var(--body-md-text-size, 16px);
  line-height: var(--body-md-line-height, 24px); /* 150% */
}

.event-series__date-day {
  display: block;
  font-weight: 900;
  color: var(--text-default-headings, #0d0f11);
  width: 100%;
  text-align: center;
  font-family: var(--font-style-sub-heading, "Open Sans");
  font-size: var(--h6-text-size, 20px);
  line-height: var(--h6-line-height, 24px); /* 120% */
}

/* Card info */
.event-series__card-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.event-series__card-time {
  display: block;
  font-weight: 400;
  color: var(--text-primary-default, #16959f);
  white-space: nowrap;
  font-family: var(--font-style-body, Merriweather);
  font-size: var(--body-sm-text-size, 14px);
  line-height: var(--body-sm-line-height, 20px); 
}

.event-series__card-title {
  display: -webkit-box;
  font-weight: 400;
  color: var(--text-default-capiton, #505964);
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-family: var(--font-style-body, Merriweather);
  font-size: var(--body-xsm-text-size, 12px);
  line-height: var(--body-xsm-line-height, 20px); 
}

/* Arrow button */
.event-series__card-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-width: 28px;
  height: 28px;
  background: var(--surface-primary-default-subtle, #f5fafa);
  border: 1px solid var(--border-primary-default-subtle, #afd4d8);
  border-radius: 256px;
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.event-series__card-arrow .material-icons {
  font-size: 14px;
  line-height: 1;
  color: var(--text-primary-default, #16959f);
}

/* Responsive */
@media (max-width: 1024px) {
  .event-series__grid {
    /* columns: 2; */
    grid-template-columns: repeat(2,1fr);
  }

  .event-series__card:nth-child(3n + 1)::after{
    display:initial;
  }

  .event-series__card:nth-child(2n + 1)::after{
    display:none;
  }

}

@media (max-width: 743px) {
  .event-series {
    padding: 32px 16px;
  }

  .event-series__inner {
    padding: 0;
  }

  .event-series__title {
    font-size: 28px;
    line-height: 36px;
  }

  .event-series__subtitle {
    font-size: 16px;
    line-height: 24px;
  }

  .event-series__grid {
    columns: 1;
  }

  .event-series__grid {
    /* columns: 2; */
    grid-template-columns: repeat(1,1fr);
  }

  .event-series__card::after{
    display:none;
  }

}

@media (max-width: 550px) {
  .event-series__card{
    margin-bottom:8px;
  }
}