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

.container {
  padding: 24px;
  margin-bottom: 26px !important;
  .homeTemplateBox {
    display: flex;
    justify-content: space-between;
    img,
    video {
      .size(@w: 100%, @h: 100%);
      object-fit: cover;
      border-radius: 10px;
    }

    .smallBox {
      .size(@w: 744px, @h: 858px);
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      > div {
        .size(@w: 744px, @h: 420px);
        border-radius: 10px;
        position: relative;
        > div {
          position: relative;
          > img {
            border-radius: 10px;
          }
          &:focus {
            &::after {
              .focused(@boxShadow:22px, @borderRadius:12px);
              border: 6px solid @PRIMARY_COLOR_RED;
              top: -4px;
              right: -4px;
              bottom: -4px;
              left: -4px;
            }
          }
        }
      }
    }

    .imgBox {
      .size(@w: 486px, @h: 858px);
      > div {
        position: relative;
        &:focus {
          &::after {
            .focused(@boxShadow:22px, @borderRadius:12px);
            border: 6px solid @PRIMARY_COLOR_RED;
            top: -4px;
            right: -4px;
            bottom: -4px;
            left: -4px;
          }
        }
        > img {
          .size(@w: 486px, @h: 858px);
          border-radius: 10px;
          object-fit: contain;
        }
      }
    }
  }
}
