@layer pages {
  .preview {
    width: 100%;
    padding: 0 var(--spacing-m);
    display: flex;
    flex-direction: column;
    h5 {
      padding-block: var(--spacing-m);
      font-size: var(--font-size-m);
    }
    .color_blocks {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: stretch;
      flex-wrap: nowrap;
      gap: var(--spacing-s);
      .color_block {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-s);
        flex-grow: 0;
        flex-shrink: 1;
        font-size: var(--font-size-m);
        transition: flex-grow 300ms, width 300ms, opacity 200ms;
        > * {
          overflow: hidden;
        }
        .color_square {
          border-radius: var(--border-radius-xxs);
          height: 17em;
        }
        &.zero_width {
          width: 0;
        }
        &.hide {
          opacity: 0;
        }
        .color_ratio {
          height: 1.5em;
          padding-inline: var(--spacing-s);
          font-size: var(--font-size-s);
        }
        .color_code {
          height: 1.5em;
          padding-inline: var(--spacing-s);
          font-size: var(--font-size-s);
          text-transform: uppercase;
          text-align: right;
          > span {
            cursor: pointer;
          }
        }
      }
    }
  }
}