.successIcon {
  width: 25px;
  height: 25px;
  position: absolute;
  right: 3px;
  top: 3px;
}

.container {
  .card {
    border-radius: 8px;
    width: 180px;
    height: 276px;
    border: 1px solid $color-fill1-4;
    margin: 0 10px 20px 10px;
    cursor: pointer;
    position: relative;

    :global {
      .next-card-media {
        height: 230px;
        overflow: hidden;

        img {
          max-height: none;
        }
      }
      .next-card-header {
        background-color: white;
        box-shadow: 0 -2px 10px #ecf0f1;
        margin: 0;
        padding: 10px 16px;
        .next-card-header-title {
          color: black;
        }
      }
      .next-card-content-container {
        padding-bottom: 10px;
        margin-top: 10px;
      }
    }

    .mark {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      color: white;
      background-color: black;
      opacity: 0;
      display: flex;
      align-items: center;

      .content {
        width: 100%;
        margin: 0 20px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
      }
    }

    &:hover .mark {
      opacity: 0.9;
    }

    .media {
      background-size: contain;
    }
  }

  .active {
    border: 2px solid $color-notice-3;
  }
}
