@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;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  padding: 25px 20px;
  position: relative;

  .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,
  &:focus {
    &::after {
      .focused(@boxShadow: 22px);
    }
    background-position: center bottom;

    .title {
      color: @COLOR_WHITE;
    }

    .keywordWrap {
      color: @COLOR_WHITE;
    }
  }
}
