:root{--variant-index-width: 3rem;--variant-font-size: 1.125rem}.variantIndex .preview__index{order:-1;display:flex;justify-content:center;align-items:center;flex-shrink:0;flex-grow:0;font-size:var(--variant-font-size);width:var(--variant-index-width);color:var(--text-color);margin-right:.0625rem}.variantIndex .preview__placeholderIndex{width:var(--variant-index-width);flex-shrink:0;flex-grow:0;order:-1}.variantIndex--compact .preview__placeholderIndex,.variantIndex--compact .preview__index{position:absolute;width:2rem;height:2rem;bottom:-.0625rem;left:-.0625rem;background:var(--background-color)}.variantIndex--compact .preview__index{box-shadow:#0000001a 2px -2px 4px}.variantIndex--compact .preview__index:after{content:"";pointer-events:none;position:absolute;inset:0;border:1px solid rgba(128,128,128,.25);border-right:0;border-top:0}@media (min-width: 768px) and (orientation: portrait),(min-width: 768px) and (orientation: landscape) and (min-height: 461px),(min-width: 768px) and (orientation: landscape) and (min-width: 897px){.variantIndex:not(.variantIndex--compact) .preview:not(.isReady) .poster{margin-left:var(--variant-index-width)}}@media (max-width: 767px),(max-width: 896px) and (max-height: 460px) and (orientation: landscape){.variantIndex:not(.variantIndex--normal) .preview__placeholderIndex,.variantIndex:not(.variantIndex--normal) .preview__index{position:absolute;width:2rem;height:2rem;bottom:-.0625rem;left:-.0625rem;background:var(--background-color)}.variantIndex:not(.variantIndex--normal) .preview__index{box-shadow:#0000001a 2px -2px 4px}.variantIndex:not(.variantIndex--normal) .preview__index:after{content:"";pointer-events:none;position:absolute;inset:0;border:1px solid rgba(128,128,128,.25);border-right:0;border-top:0}}