.event-block {
  container-type: inline-size;
}
a.event {
  --bt--radius: var(--sp--5);
  --bt--background: var(--co--secondary--lower);
  --bt--hover--background: var(--co--secondary--low);
  --bt--color: var(--co--primary--high);
  --bt--padding-v: var(--sp--5);
  --bt--padding-h: var(--sp--5);
  --event--accent: var(--co--secondary--medium);
  --event--hover--accent: var(--co--secondary--high);
  --bt--gap: var(--sp--4);
  --event--image-width: 100%;
  text-align: left;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  height: 100%;
}
a.event.has-image {
  --bt--padding-v: var(--sp--4);
  --bt--padding-h: var(--sp--4);
}

a.event:not(.centre-de-ressources) {
  --bt--background: var(--co--primary--lower);
  --bt--hover--background: var(--co--primary--low);
  --event--accent: var(--co--primary--medium);
  --event--hover--accent: var(--co--primary--high);
}
a.event:not(.centre-de-ressources) span.event-tag {
  background-color: var(--co--primary--high);
}
.event .event-date-indicator,
.event .event-date {
  color: var(--event--accent);
  transition-property: color;
}
.event:hover .event-date-indicator,
.event:focus-visible .event-date-indicator,
.event:hover .event-date,
.event:focus-visible .event-date {
  color: var(--event--hover--accent);
}
p.event-date {
  font-weight: 700;
  margin-bottom: var(--sp--2);
  display: flex;
  gap: var(--sp--2);
  flex-wrap: wrap;
  align-items: center;
}
.event img {
  border: 1px solid #1833321f;
  border-radius: var(--sp--2);
  width: var(--event--image-width);
}
.event figure {
  flex-shrink: 0;
}

a.event:hover .event-tag,
a.event:focus-visible .event-tag {
  background-color: var(--event--hover--accent);
}

/* @container (min-width: 24rem) {
  a.event:not(.has-image) {
    flex-direction: row;
    align-items: center;
    --event--image-width: 9.375rem;
  }
} */
@media (min-width: 32rem) {
  a.event {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    --event--image-width: 9.375rem;
    --bt--padding-v: var(--sp--6);
    --bt--padding-h: var(--sp--6);
  }
}

/* Modal */
.event-modal {
  width: calc(100% - 2 * var(--sp--5));
  max-width: var(--ly--width--small);
  height: calc(100% - 2 * var(--sp--5));
  max-height: 37.5rem;
  padding: var(--sp--6);
  border-radius: var(--sp--5);
  border: 0;
}
.event-modal-header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp--4);
}
.event-modal > :not(:last-child) {
  margin-bottom: var(--sp--6);
}
.event-modal img {
  border-radius: var(--sp--3);
}