.card {
  border-radius: $border-radius--l;
  padding: $spacing--l;
}

.card__header {
  display: flex;
  margin-left: -25px;
  margin-right: -25px;
  margin-bottom: 20px;
}

.card__header > * {
  margin-left: 25px;
  margin-right: 25px;
}

.card__header--horizontal {
  flex-direction: column;

  @include viewport--l {
    flex-direction: row-reverse;
  }
}

.card__header-media {
  margin-bottom: 20px;

  @include viewport--l {
    margin-bottom: 0;
  }

  .card__header--horizontal & {
    width: 100%;
    max-width: 150px;
  }
}

.card__header-content {
  .card__header--horizontal & {
    flex: 1;
  }
}

.card__header-meta {
  @include font-style('body--m');
  margin-bottom: 5px;
}

.card__eyebrow {
  @include font-style('body--m', 'body--l');
  @include text--alternative;
  margin-bottom: 10px;
}

.card__title {
  @include font-style('title--s');
  margin-bottom: 5px;
}

.card__link-title {
  @include font-style('title--xs', 'title--s');
  margin-top: auto;
  padding-right: 5px;
  word-break: break-word;
}

.card__description {
  @include font-style('body--l');
  margin-bottom: 20px;
}

.card__tags {
  @include font-style('body--m');
  @include text--alternative;
  margin-bottom: 20px;
}

.card__content {
  margin-bottom: 20px;
  transition: max-height 0.3s;

  &.card__content--collapsible {
    max-height: 150px;
    @include viewport--l {
      max-height: 60px;
    }
  }

  &.card__content--collapsible[aria-expanded='false'] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;

    @include viewport--l {
      -webkit-line-clamp: 2;
    }
  }
}

.card__content-button[aria-expanded='false'] {
  .card-content-button--more {
    display: inline-block;
  }
  .card-content-button--less {
    display: none;
  }
}

.card__content-button[aria-expanded='true'] {
  .card-content-button--more {
    display: none;
  }
  .card-content-button--less {
    display: inline-block;
  }
}

.card--small {
  .card__header--horizontal {
    flex-direction: column;
  }

  .card__title {
    @include typeset(26);
    margin-bottom: 5px;
  }

  .card__header-media {
    margin-bottom: 20px;
  }

  .card__content {
    &.card__content--collapsible {
      max-height: 150px;
    }

    &.card__content--collapsible[aria-expanded='false'] {
      -webkit-line-clamp: 5;
    }
  }
}

.card--extra-small {
  border: 2px solid transparent;
  display: flex;
  height: 100%;
  justify-content: space-between;
  padding: 20px;
  position: relative;
  transition: border $transition-duration--fast;

  &:hover {
    border: 2px solid currentColor;
    transition: border $transition-duration--fast;
  }

  .card__header-content {
    display: flex;
    flex-direction: column;
  }

  .card__link-button {
    line-height: 0;
  }

  .card__link-button .icon {
    transform: rotate(-90deg);

    @include viewport--l {
      height: 30px;
      width: 30px;
    }
  }
}

.card-row-gap {
  row-gap: 10px;

  @include viewport--l {
    row-gap: 40px;
  }
}