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

.container {
  .size(@w: 100%, @h: 100%);
  border-radius: 12px;
  border: 1px solid @COLOR_GRAY02;
  background-color: @COLOR_WHITE;
  padding: 18px;

  .imgWrap {
    .size(@w: 100%, @h: 288px);

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

  .titleWrap {
    .size(@w: 100%, @h: calc(100% - 288px));
    display: flex;
    padding-top: 18px;
    align-items: center;

    .title {
      .font(@fontFamily: @baseFontBold, @fontSize: 24px);
      color: @COLOR_GRAY06;
    }
  }

  &:focus {
    &::after {
      .focused(@boxShadow: 50px, @borderRadius:12px);
    }
  }
}
