.cards__event {
  .cards__item {
    border-radius: 0;
    margin-bottom: $spacing--xxs;
  }

  .cards__image {
    a {
      height: 130px;
    }

    & img {
      border-radius: $border-radius;
    }
  }

  .badge--event {
    left: 10px;
    position: absolute;
    bottom: 10px;
  }

  .notice-in-page {
    margin-top: $spacing--xs;
    max-width: 100%;
  }

  .cards__title {
    @include font-style($cards-event-title-font-style, $cards-event-title-font-style--l);
    margin-top: $spacing--s;
  }

  .cards__meta {
    @include font-style('body--m');
  }

  .cards__text {
    @include font-style($cards-event-text-font-style);
    padding-top: $spacing--xxs; // avoids margin collapse depending on content above text
  }

  @include viewport--m {
    .cards__item {
      border-radius: $border-radius;
    }
  }

  @include viewport--l('inverted') {
    .cards__text {
      padding-top: $spacing--xs; // adds up to 20 with the mandatory list__items margin-bottom in this component.
    }
  }

  @include viewport--l {
    .cards__item {
      margin-bottom: 30px;
    }
  }
}