.leport-events-grid {
  --gap: 40px;
  --row-gap: 60px;
  --padding: 24px;
  --title-size: 24;
  --location-size: 20;
  --icon-size: 32px;
  --columns: 1;
  gap: var(--gap);
  row-gap: var(--row-gap);
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
}

.leport-events-grid__event {
  background: rgb(var(--color-primary));
  border-radius: var(--border-radius);
  color: rgb(var(--color-white));
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  padding: 24px;
}

.leport-events-grid__row {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}
.leport-events-grid__row--first {
  margin-top: auto;
}
.leport-events-grid__row .icon {
  color: #F7F0E9;
  height: var(--icon-size);
  width: var(--icon-size);
}

.leport-events-grid__title {
  font-size: calc(var(--title-size) / var(--base) * 1rem);
  font-weight: bold;
  text-align: center;
  margin-bottom: 40px;
}

.leport-events-grid__location {
  font-size: calc(var(--location-size) / var(--base) * 1rem);
  font-weight: bold;
}

a.button.leport-events-grid__action {
  background: #F7F0E9;
  margin-top: 40px;
  width: 100%;
}

@media (min-width: 768px) {
  .leport-events-grid {
    --columns: 2;
    --row-gap: 40px;
  }
}
@media (min-width: 992px) {
  .leport-events-grid {
    --columns: 3;
  }
}
@media (min-width: 1200px) {
  .leport-events-grid {
    --gap: 55px;
  }
}