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

.card {
  .size(@w: 561px, @h:150px);
  background-color: @COLOR_LIGHT_SKYBLUE;
  border: 1px solid #ccc;
  .flex();
  position: relative;

  .imageBox {
    .size(@w: 150px, @h: 100%);
    background-color: @COLOR_WHITE;
    background-size: cover;

    > img {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
  }

  .infoWrap {
    .size(@w: calc(100% - 150px), @h: 100%);
    padding-left: 24px;
    .flex(@direction: column, @alignCenter: flex-start);

    .title {
      color: @COLOR_GRAY06;
      .font(@fontFamily: @arialFont, @fontSize: 24px);
      .elip(@clamp: 2);
      line-height: 1.33;
      letter-spacing: -0.6px;
      margin-bottom: 20px;
    }

    .price {
      color: @COLOR_GRAY06;
      .font(@fontFamily: @arialFont, @fontSize: 20px);
      line-height: 1.2;
      letter-spacing: -0.5px;
      text-decoration: line-through;
    }

    .dcPrice {
      color: @PRIMARY_COLOR_RED;
      .font(@fontFamily: @arialFontBold, @fontSize: 28px);
      line-height: 0.86;
      letter-spacing: -0.7px;
      margin-left: 10px;
    }
  }

  &:focus-within,
  &:focus {
    &::after {
      .focused(@boxShadow: 22px);
    }
  }
}
