/* Shared preview-board crop/rotation rules used by catalog cards and carousels. */

  .preview-board-zone {
    --preview-board-overscan: 0%;

    position: relative;
    overflow: hidden;
  }

  .preview-board-zone img {
    position: absolute;
    display: block;
    object-fit: fill;
    max-width: none;
    max-height: none;
  }

  .preview-board-zone--full_board img {
    inset: calc(var(--preview-board-overscan) * -1);
    width: calc(100% + (var(--preview-board-overscan) * 2));
    height: calc(100% + (var(--preview-board-overscan) * 2));
  }

  .preview-board-zone--corner_upper_left img,
  .preview-board-zone--corner_upper_right img,
  .preview-board-zone--corner_lower_left img,
  .preview-board-zone--corner_lower_right img {
    width: calc(211.1111% + (var(--preview-board-overscan) * 2));
    height: calc(211.1111% + (var(--preview-board-overscan) * 2));
    top: calc(var(--preview-board-overscan) * -1);
    left: calc(var(--preview-board-overscan) * -1);
  }

  .preview-board-zone--corner_upper_right img {
    left: calc(-111.1111% - var(--preview-board-overscan));
  }

  .preview-board-zone--corner_lower_left img {
    top: calc(-111.1111% - var(--preview-board-overscan));
  }

  .preview-board-zone--corner_lower_right img {
    top: calc(-111.1111% - var(--preview-board-overscan));
    left: calc(-111.1111% - var(--preview-board-overscan));
  }

  .preview-board-zone--side_left img,
  .preview-board-zone--side_top img,
  .preview-board-zone--side_right img,
  .preview-board-zone--side_bottom img,
  .preview-board-zone--center img {
    width: calc(211.1111% + (var(--preview-board-overscan) * 2));
    height: calc(211.1111% + (var(--preview-board-overscan) * 2));
    top: calc(-55.5556% - var(--preview-board-overscan));
    left: calc(-55.5556% - var(--preview-board-overscan));
  }

  .preview-board-zone--side_left img {
    left: calc(var(--preview-board-overscan) * -1);
  }

  .preview-board-zone--side_top img {
    top: calc(var(--preview-board-overscan) * -1);
  }

  .preview-board-zone--side_right img {
    left: calc(-111.1111% - var(--preview-board-overscan));
  }

  .preview-board-zone--side_bottom img {
    top: calc(-111.1111% - var(--preview-board-overscan));
  }

  .preview-board-rotation--90 {
    transform: rotate(90deg);
  }

  .preview-board-rotation--180 {
    transform: rotate(180deg);
  }

  .preview-board-rotation--270 {
    transform: rotate(270deg);
  }

  .variation-preview-editor {
    display: grid;
    grid-template-columns: 236px 1fr;
    grid-template-areas:
      "preview zones"
      "preview rotate";
    gap: 14px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--vk-paper-depth-inset-bg);
    border-radius: 14px;
    background: var(--vk-app-surface-panel);
  }

  .variation-preview-editor-frame {
    grid-area: preview;
    width: 236px;
    height: 236px;
    border-radius: var(--vk-radius-control);
    border: 1px solid var(--vk-paper-depth-inset-bg);
    background: var(--vk-surface-board);
  }

  .variation-preview-zone-grid {
    grid-area: zones;
    width: max-content;
    display: grid;
    grid-template-columns: repeat(3, 34px);
    grid-template-rows: repeat(3, 34px);
    grid-template-areas:
      "zone-1-1 zone-1-2 zone-1-3"
      "zone-2-1 zone-2-2 zone-2-3"
      "zone-3-1 zone-3-2 zone-3-3";
    gap: 7px;
  }

  .variation-preview-rotation-grid {
    grid-area: rotate;
    width: 116px;
    display: grid;
    grid-template-columns: repeat(3, 34px);
    gap: 7px;
  }

  .variation-preview-zone-button {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--vk-radius-panel-control);
  }

  .variation-preview-zone-button .lucide {
    width: 16px;
    height: 16px;
    stroke-width: 1.9;
  }