.#{$prefix}-card {
  display: flex;
  flex-direction: column;
  position: relative;

  .#{$prefix}-grid-row & {
    height: 100%;
  }

  &:not(&--no-arrow) &__body {
    @include font-icon(arrow-right-line, lg, after) {
      width: space(3N);
      height: space(3N);
      margin-top: auto;
      margin-left: auto;
      @include scheme-element-text-color(bf500);
    }
  }

  &__img {
    position: relative;
    width: 100%;

    &::before {
      display: block;
      content: '';
      padding-bottom: map_get($ratio-scale, 16x9);
    }

    img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 50%;
      top: 0;
      left: 0;
    }
  }

  &__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: space(3N);
    @include scheme-element-bg-color(beige);
  }

  &__img + &__body {
    $bs:inset 1px 0 0 0 $COLOR, inset -1px -1px 0 0 $COLOR;
  }

  &__detail {
    margin-top: 0;
    margin-bottom: space(2N);
    @include text-styles(sm);
    @include scheme-element-text-color(g600);
  }

  &__lead {
    margin-top: 0;
    margin-bottom: space(1N);
    @include text-styles(lead);
  }

  &__desc {
    margin-top: 0;
    margin-bottom: space(2N);
    @include text-styles(sm);
  }

  .#{$prefix}-link {
    @include scheme-element-bg-color(t-plain, true, before-static);
    margin-top: auto;

    &:focus {
      outline-offset: -9999px;

      &::before {
        @include scheme-element-outline-color(focus, false, 2px solid $COLOR);
        outline-offset: 2px;
        z-index: 100;
      }
    }
  }

  &__link {
    position: static;
    text-decoration: none;
    display: inline-flex;
    box-shadow: none;
    width: 100%;
    @include scheme-element-bg-color(t-plain, true, before-static);
    margin-top: auto;

    &:focus {
      outline-offset: -9999px;

      &::before {
        @include scheme-element-outline-color(focus, false, 2px solid $COLOR);
        outline-offset: 2px;
        z-index: 100;
      }
    }
  }

  @include respond-from(md) {
    &--horizontal {
      flex-direction: row;
    }

    &--horizontal &__img {
      width: 40.78%;
    }

    &--horizontal &__img + &__body {
      $bs:inset 0 1px 0 0 $COLOR, inset -1px -1px 0 0 $COLOR;
    }
  }
}