@keyframes RemVsPxDiagram-module-scss-module__hjiNsq__cycle-border-color{0%{border:2px solid var(--primary-color)}to{border:2px solid var(--secondary-color)}}@keyframes RemVsPxDiagram-module-scss-module__hjiNsq__cycle-colour{0%{color:var(--primary-color)}to{color:var(--secondary-color)}}@keyframes RemVsPxDiagram-module-scss-module__hjiNsq__fadeInSlideFromLeft{0%{opacity:0;left:-10rem}to{opacity:1;left:0}}@keyframes RemVsPxDiagram-module-scss-module__hjiNsq__fadeOutSlideToLeft{0%{opacity:1;left:0}to{opacity:0;left:-10rem}}@keyframes RemVsPxDiagram-module-scss-module__hjiNsq__fadeInKF{0%{opacity:0}to{opacity:1}}@keyframes RemVsPxDiagram-module-scss-module__hjiNsq__fadeOutKF{0%{opacity:1}to{opacity:0}}@keyframes RemVsPxDiagram-module-scss-module__hjiNsq__fadeInScaleDownKF{0%{opacity:0}to{opacity:1;transform:scale(1)}}@keyframes RemVsPxDiagram-module-scss-module__hjiNsq__fadeInSlideUpKF{0%{opacity:0;bottom:-5rem}to{opacity:1;bottom:0}}@keyframes RemVsPxDiagram-module-scss-module__hjiNsq__slideDownKF{0%{top:-5rem}to{top:0}}@keyframes RemVsPxDiagram-module-scss-module__hjiNsq__fadeInSlideDownKF{0%{opacity:0;top:-5rem}to{opacity:1;top:0}}@keyframes RemVsPxDiagram-module-scss-module__hjiNsq__fadeOutSlideUpKF{0%{opacity:1;top:0}to{opacity:0;top:-5rem}}.RemVsPxDiagram-module-scss-module__hjiNsq__animation{height:100%;display:block}.RemVsPxDiagram-module-scss-module__hjiNsq__animation--cycle-border-color{-ms-animation:cycle-border-color 2s linear infinite alternate;padding:.5rem;animation:2s linear infinite alternate RemVsPxDiagram-module-scss-module__hjiNsq__cycle-border-color}.RemVsPxDiagram-module-scss-module__hjiNsq__animation--cycle-colors{-ms-animation:cycle-colour 1s linear infinite alternate;animation:1s linear infinite alternate RemVsPxDiagram-module-scss-module__hjiNsq__cycle-colour}.RemVsPxDiagram-module-scss-module__hjiNsq__container{text-align:left}.RemVsPxDiagram-module-scss-module__hjiNsq__diagram{flex-direction:column;gap:1rem;display:flex}.RemVsPxDiagram-module-scss-module__hjiNsq__topRow{grid-template-columns:1fr 1fr;gap:1rem;display:grid}@media screen and (min-width:0) and (max-width:800px){.RemVsPxDiagram-module-scss-module__hjiNsq__topRow{grid-template-columns:1fr}}.RemVsPxDiagram-module-scss-module__hjiNsq__bottomRow{grid-template-columns:1fr;display:grid}.RemVsPxDiagram-module-scss-module__hjiNsq__column,.RemVsPxDiagram-module-scss-module__hjiNsq__fullWidthColumn{flex-direction:column;gap:.5rem;display:flex}.RemVsPxDiagram-module-scss-module__hjiNsq__columnHeader{border-bottom:2px solid var(--grey-blue);text-transform:uppercase;letter-spacing:.03em;margin-bottom:.25rem;padding-bottom:.4rem;font-family:Source Code Pro,monospace;font-size:.8rem;font-weight:600}.RemVsPxDiagram-module-scss-module__hjiNsq__columnHeader.RemVsPxDiagram-module-scss-module__hjiNsq__good{color:var(--lime);border-bottom-color:var(--lime)}.RemVsPxDiagram-module-scss-module__hjiNsq__columnHeader.RemVsPxDiagram-module-scss-module__hjiNsq__bad{color:var(--red);border-bottom-color:var(--red)}.RemVsPxDiagram-module-scss-module__hjiNsq__card{background:var(--background-color-dark-one);border-radius:4px;flex-direction:column;gap:.6rem;padding:.6rem;display:flex}.RemVsPxDiagram-module-scss-module__hjiNsq__label{color:var(--light-grey);text-transform:uppercase;letter-spacing:.03em;font-size:.7rem;font-weight:600}.RemVsPxDiagram-module-scss-module__hjiNsq__mockBox{flex-direction:column;gap:.4rem;display:flex}.RemVsPxDiagram-module-scss-module__hjiNsq__mockContent{border:1px dashed var(--grey-blue);color:var(--font-color);border-radius:4px;justify-content:center;align-items:center;font-family:Source Code Pro,monospace;font-size:.8rem;display:flex;position:relative}.RemVsPxDiagram-module-scss-module__hjiNsq__remLayout{background:color-mix(in srgb, var(--red) 8%, transparent);border-color:color-mix(in srgb, var(--red) 40%, transparent);padding:22px 16px}.RemVsPxDiagram-module-scss-module__hjiNsq__pxLayout{background:color-mix(in srgb, var(--lime) 8%, transparent);border-color:color-mix(in srgb, var(--lime) 40%, transparent);padding:14px 16px}.RemVsPxDiagram-module-scss-module__hjiNsq__mockText{color:var(--font-color);font-size:.85rem}.RemVsPxDiagram-module-scss-module__hjiNsq__spacingAnnotation{align-items:center;gap:.4rem;padding-left:.3rem;display:flex}.RemVsPxDiagram-module-scss-module__hjiNsq__annotationLine{background:var(--grey-blue);flex-shrink:0;width:12px;height:1px}.RemVsPxDiagram-module-scss-module__hjiNsq__annotationValue{white-space:nowrap;font-family:Source Code Pro,monospace;font-size:.7rem}.RemVsPxDiagram-module-scss-module__hjiNsq__annotationValue.RemVsPxDiagram-module-scss-module__hjiNsq__good{color:var(--lime)}.RemVsPxDiagram-module-scss-module__hjiNsq__annotationValue.RemVsPxDiagram-module-scss-module__hjiNsq__bad{color:var(--red)}.RemVsPxDiagram-module-scss-module__hjiNsq__verdict{border-radius:4px;padding:.35rem .5rem;font-size:.75rem;font-weight:600;line-height:1.4}.RemVsPxDiagram-module-scss-module__hjiNsq__verdict.RemVsPxDiagram-module-scss-module__hjiNsq__good{color:var(--lime);background:color-mix(in srgb, var(--lime) 10%, transparent)}.RemVsPxDiagram-module-scss-module__hjiNsq__verdict.RemVsPxDiagram-module-scss-module__hjiNsq__bad{color:var(--red);background:color-mix(in srgb, var(--red) 10%, transparent)}.RemVsPxDiagram-module-scss-module__hjiNsq__fontSizeDemo{align-items:flex-start;gap:1.5rem;display:flex}@media screen and (min-width:0) and (max-width:800px){.RemVsPxDiagram-module-scss-module__hjiNsq__fontSizeDemo{flex-direction:column;gap:.6rem}}.RemVsPxDiagram-module-scss-module__hjiNsq__fontStep{flex-direction:column;gap:.2rem;display:flex}.RemVsPxDiagram-module-scss-module__hjiNsq__fontLabel{color:var(--blue);font-family:Source Code Pro,monospace;font-size:.7rem;font-weight:600}.RemVsPxDiagram-module-scss-module__hjiNsq__fontPreview{color:var(--font-color);white-space:nowrap;font-family:Source Code Pro,monospace}