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

.container {
  position: relative;
  .flex(@justifyCenter: flex-start);
  width: 100%;
  margin: 2px 0 56px;

  > figure {
    .flex();
    .size(@w: 660px, @h: 608px);

    > div {
      .flex(@direction: column);
      .size(@w: 660px, @h: 564px);
      margin-left: 18px;
      border-radius: 12px;
      border: solid 1px @COLOR_GRAY02;
      background-color: @COLOR_WHITE;

      > img {
        &.noProductDefault {
          .size(@w: 360px, @h: 180px);
        }

        &.noProductJuvelirochka {
          .size(@w: inherit, @h: inherit);
        }
      }

      > figcaption {
        .size(@w: 360px, @h: 65px);
        color: #a8a8a8;
        font-family: @baseFont;
        font-size: 30px;
        font-weight: normal;
        text-align: center;
        line-height: 1.4;
      }
    }
  }
}

.player {
  &::after {
    .focused(@boxShadow: 0, @borderRadius: 12px);
    border: 6px solid @PRIMARY_COLOR_RED;
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px;
  }
}
