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

.card {
  .size(@w: 560px, @h: 140px);
  background-image: url("../../../../../../assets/searchpanel/bg_srch_curation.png");
  border: 2px solid #ccc;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  padding: 25px 20px;

  .title {
    color: @COLOR_GRAY06;
    .font(@fontFamily: @tahomaFontBold, @fontSize: 26px);
    line-height: 1.31;
    letter-spacing: -0.65px;
    color: @COLOR_GRAY06;
    font-weight: 900;
    .elip(@clamp: 2);
  }

  .keywordWrap {
    margin-top: 1px;
    display: flex;
    color: #c06;
    .font(@fontFamily: @arialFontBold, @fontSize: 24px);
    letter-spacing: -0.6px;
    line-height: 1.67;
    min-height: 26px;

    .keywordList {
      margin-right: 14px;
    }
  }

  &:focus-within {
    background-position: center bottom;
    border: 4px solid @PRIMARY_COLOR_RED;
    box-shadow: 0 0 50px 0 rgba(11, 8, 8, 0.5);

    .title {
      color: @COLOR_WHITE;
    }

    .keywordWrap {
      color: @COLOR_WHITE;
    }
  }
}
