.article-card-container {
  display: flex;
  width: 100%;

  > div {
    margin-right: $margin-normal;
    width: 100%;
  }

  > div:last-child {
    margin-right: 0;
  }
}

.content-card-slider {
  .article-card {
    .header {
      margin: $margin-triple 0;
    }
  }
}

.article-card {
  position: relative;
  background-size: cover;
  background-position: right;
  background-repeat: no-repeat;
  width: 100%;
  flex-direction: column;
  padding: $margin-enterprise;
  overflow: hidden;

  &__color-layer {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transition: all .05s ease-out;

    .background-container {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      transition: all .1s ease-out;
      opacity: .9;
    }

    &:before {
      content: '';
      width: 0;
      height: 0;
      position: absolute;
      bottom: 0;
      right: -1px;
      box-shadow: 0 1px 1px rgba(0, 0, 0, .3), -1px 1px 1px rgba(0, 0, 0, .2);
      border-width: 16px;
      border-style: solid;
      border-color: rgba(255, 255, 255, 1) rgba(0, 0, 0, .4) rgba(0, 0, 0, .4) rgba(255, 255, 255, 1);
      transition: all .2s ease-out;
      border-radius: $border-radius-tui-card 0 0 0;
      z-index: 999;
    }
  }

  &:hover {
    box-shadow: $box-shadow-card-hover;

    .article-card {
      &__color-layer {
        .background-container {/* stylelint-disable max-nesting-depth */
          opacity: .8;
        }

        &:before {
          border-width: $margin-double;
          box-shadow: 0 1px 6px rgba(0, 0, 0, .3), -1px 6px 1px rgba(0, 0, 0, .2);
        }
        /* stylelint-enable */
      }
    }
  }

  &:active {
    .article-card {
      &__color-layer {
        .background-container {/* stylelint-disable max-nesting-depth */
          opacity: .9;
        }

        &:before {
          border-width: 16px;
          box-shadow: 0 1px 6px rgba(0, 0, 0, .3), -1px 6px 1px rgba(0, 0, 0, .2);
        }
        /* stylelint-enable */
      }
    }
  }

  &.card {
    color: $color-white;
    align-items: flex-start;
  }

  .reading-time,
  .publisher {
    left: $margin-enterprise;
    position: absolute;
  }

  .reading-time {
    top: $margin-enterprise;
    font-size: 16px;
    font-style: italic;
    font-weight: bold;
  }

  .publisher {
    bottom: $margin-enterprise;
  }

  .header {
    z-index: 99;
    margin: $margin-triple 0;

    .title {
      display: block;
      display: -webkit-box;
      height: $margin-double*1.2*2;
      margin: 0 auto;
      font-size: $margin-double;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.2;
      font-style: italic;
      font-weight: bold;
    }

    @include breakpoint(sm) {
      margin: 88px 0 133px;
    }
  }

  .theme {
    display: inline-block;
    font-size: $margin-normal;
    color: black;
    border-radius: $border-radius-tui-card;
    background-color: $color-white;
    padding: $margin-half $margin-normal;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: $margin-normal;
    box-shadow: $box-shadow-card;
  }
}