@import "../../../style/CommonStyle.module.less";
@import "../../../style/utils.module.less";

.container {
  position: relative;
  .flex(@direction: column);
  .size(@w: 260px, @h: 375px);
  margin: 0 10px;
  border-radius: 10px;
  background-color: #e3e7ee;

  div:nth-child(1) {
    position: relative;
    .size(@w: 260px, @h: 260px);

    img {
      .size(@w: 260px, @h: 260px);
      object-fit: cover;
      border-top-right-radius: 10px;
      border-top-left-radius: 10px;
    }

    > span {
      .position(@position: absolute, @top: auto, @right: auto, @bottom: 12px, @left: 12px);
      .size(@w: 44px, @h: 44px);
      border-radius: 44px;
      background-color: #c70850;
      color: #fff;
      font-family: @baseFontBold;
      font-size: 20px;
      line-height: 44px;
      text-align: center;
    }
  }

  div:nth-child(2) {
    .flex(@direction: column, @alignCenter: flex-start);
    gap: 10px;
    padding: 10px 15px;

    h3 {
      display: -webkit-box;
      font-family: @baseFontBold;
      font-size: 24px;
      line-height: 26px;
      text-overflow: ellipsis;
      word-break: break-all;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    p {
      color: #c70850;
      font-family: @baseFontBold;
      font-size: 24px;

      span {
        margin-left: 5px;
        color: #767676;
        font-size: 18px;
        text-decoration: line-through;
      }
    }
  }

  &::after {
    content: "";
    .position(@position: absolute, @top: -12px, @right: auto, @bottom: auto, @left: -12px);
    display: block;
    .size(@w: 276px, @h: 390px);
    border: 4px solid transparent;
    border-radius: 10px;
  }

  &:focus {
    background-color: #fcfcfc;

    &::after {
      border: 4px solid #c70850;
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0),
        0px 9px 15px 0 rgba(0, 0, 0, 0.3);
    }
  }
}
