.basic-flex-css figure{align-self:flex-end}.basic-flex-css .box{display:grid;align-items:center;justify-content:center;padding:2.4rem;border:1px solid hsl(var(--base-h), 50%, 50%)}.basic-flex-css .axis{position:absolute;display:flex;background:hsl(var(--main-text-color));height:.1rem;line-height:0;width:100%;top:-1.6rem;align-items:center;justify-content:center;text-shadow:2px 2px 4px hsl(var(--main-text-color)),-2px -2px 4px hsl(var(--main-text-color)),-2px 2px 4px hsl(var(--main-text-color)),2px -2px 4px hsl(var(--main-text-color));color:hsl(var(--main-background-color));font-weight:600}.basic-flex-css .axis::before,.basic-flex-css .axis::after{position:absolute;top:-0.1rem;color:hsl(var(--main-text-color));text-shadow:none}.basic-flex-css .axis::before{content:"<";left:-0.2rem}.basic-flex-css .axis::after{content:">";right:-0.2rem}.basic-flex-css .axis.top-to-bottom{width:.1rem;height:100%;left:-1.6rem;top:0;writing-mode:vertical-lr}.basic-flex-css .axis.top-to-bottom::before,.basic-flex-css .axis.top-to-bottom::after{right:-0.1rem;left:unset}.basic-flex-css .axis.top-to-bottom::after{top:unset;bottom:-0.3rem}.basic-flex-css .background-main{background:hsl(var(--base-h), 50%, 50%);color:hsl(var(--base-h), 50%, 95%);font-weight:600}.basic-flex-css .coloured-square{aspect-ratio:1;background:hsl(var(--base-h), 50%, 50%)}.basic-flex-css .coloured-square.grow{flex-grow:4}.basic-flex-css .coloured-square.shrink-2{flex-shrink:2}.basic-flex-css .coloured-square.shrink-4{flex-shrink:4}.basic-flex-css .gap-8{gap:.8rem}.basic-flex-css .gap-32{gap:3.2rem}.basic-flex-css .max-content{height:-moz-max-content;height:max-content}.basic-flex-css .grid{display:grid}.basic-flex-css .grid.center__horizontally{justify-content:center}.basic-flex-css .grid.center__vertically{align-content:center}.basic-flex-css .grid.place.center{place-content:center}.basic-flex-css .rtl{writing-mode:rl;direction:rtl}.basic-flex-css .flex{display:flex;position:relative}.basic-flex-css .flex.column{flex-direction:column}.basic-flex-css .flex.column.reverse{flex-direction:column-reverse}.basic-flex-css .flex.row{flex-direction:row}.basic-flex-css .flex.row.reverse{flex-direction:row-reverse}.basic-flex-css .flex.wrap{flex-wrap:wrap}.basic-flex-css .flex.center__horizontally{align-items:center}.basic-flex-css .flex.center__vertically{justify-content:center}.basic-flex-css .flex.place--items.center{place-items:center}.basic-flex-css .flex.place--content.center{place-content:center}.basic-flex-css .overflow-auto{overflow:auto}.basic-flex-css .testing-size__wrapper .box{position:relative}.basic-flex-css .testing-size__wrapper .box span{position:absolute;bottom:-2.4rem;text-align:center;width:100%;color:hsl(var(--main-text-color));font-size:1.4rem}.basic-flex-css .testing-size__wrapper .box span:not(:empty)::after{position:absolute;content:"px"}