.event-teaser__wrapper {
  padding: 32px;
  background-color: white;
  border-radius: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;

}

.block-views-blockevent-view-block-1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.view-event-view > * {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

@media screen and (min-width: 999px) {
  .view-event-view > * {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    align-items: stretch;
    gap: 25px;
  }
}

.teaser__date {
  display: flex;
  padding: 10px;
  align-items: center;
  gap: 8px;
  border-radius: 5px;
  border: 1px solid #CACACA;
  max-width: fit-content;
  cursor: default;
  color: var(--color-primary--1);
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.teaser__image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
}

.teaser__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.teaser__content > * > a{
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  color: var(--Secondery, #A71946);
  text-overflow: ellipsis;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.more-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.more-link > a{
  color: var(--Neutral, #27222B);
  font-size: 17px;
  font-weight: 700;
  display: flex;
  padding: 16px;
  border-radius: 40px;
  max-width: fit-content;
  background: var(--color-primary--2);
  margin-top: 25px;
  transition: all ease 0.2s;
  text-decoration: none;
}

.more-link > a:hover{
  opacity: 90%;
  cursor: pointer;
  text-decoration: none;
}

/* Dans le bloc 2, les event-teasers ont la même apparence que les news-teasers */
.block-views-blockevent-view-block-2 .event-teaser__wrapper {
  border: 1px solid #E3E3E3;
  gap: 25px;
}

.block-views-blockevent-view-block-2 .teaser__image {
  width: auto;
  height: auto;
  border-radius: 10px;
}

.block-views-blockevent-view-block-2 .teaser__image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}