/* Tsumego catalog cards reuse variation preview geometry without the info column. */

  .variation-card--tsumego,
  .variation-card-create--tsumego {
    flex: 0 0 var(--vk-card-tsumego-min-width);
    width: var(--vk-card-tsumego-min-width);
    min-width: var(--vk-card-tsumego-min-width);
    max-width: var(--vk-card-tsumego-max-width);
    height: calc(
      var(--vk-card-preview-stack-height) +
      var(--vk-card-variation-pad-top) +
      var(--vk-card-variation-pad-bottom)
    );
    min-height: calc(
      var(--vk-card-preview-stack-height) +
      var(--vk-card-variation-pad-top) +
      var(--vk-card-variation-pad-bottom)
    );
    contain-intrinsic-size: var(--vk-card-tsumego-min-width) 208px;
  }

  .variation-card--tsumego .tsumego-card-surface {
    grid-template-columns: 164px;
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "preview";
    column-gap: 0;
    justify-content: center;
    cursor: pointer;
  }

  .tsumego-card-preview-wrap {
    grid-area: preview;
    min-width: 0;
    height: var(--vk-card-preview-stack-height);
    display: grid;
    grid-template-rows: var(--vk-card-preview-size) var(--vk-card-preview-dock-slot-height);
    align-self: start;
  }

  .tsumego-card-preview-frame {
    position: relative;
    z-index: 2;
    width: var(--vk-card-preview-size);
    height: var(--vk-card-preview-size);
    justify-self: center;
    overflow: hidden;
    border-radius: var(--vk-preview-board-radius);
    background: var(--vk-surface-board);
  }

  .tsumego-card-preview-frame.is-focus-preview img {
    inset: auto;
    width: calc(100% * var(--bookmark-focus-scale, 1));
    height: calc(100% * var(--bookmark-focus-scale, 1));
    left: var(--bookmark-focus-left, 0);
    top: var(--bookmark-focus-top, 0);
  }

  .tsumego-card-docks {
    width: 100%;
  }