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

.card {
  .size(@w: 344px, @h: 281px);
  background-color: @COLOR_LIGHT_SKYBLUE;
  border-radius: 10px;
  overflow: hidden;
  transform: scale(0.9);
  transition: all 0.15s ease-in-out;

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

    .liveBadge {
      position: absolute;
      top: 10px;
      right: 10px;
    }

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

  .title {
    width: 100%;
    height: calc(100% - 182px);
    color: @COLOR_GRAY06;
    .font(@fontFamily: @arialFont, @fontSize: 20px);
    .elip(@clamp:1);
    line-height: 1.2;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    padding: 0 15px;
  }

  &:focus-within,
  &:focus {
    border: 4px solid @PRIMARY_COLOR_RED;
    background-color: @COLOR_WHITE;
    box-shadow: 0 0 50px 0 rgba(11, 8, 8, 0.5);
    .elip(@clamp:2);
    line-height: 1.5;
    transform: scale(1);
  }
}
