:root{--hover-bgr:hsla(210,100%,56%,1)}.flexbox-col{display:flex;flex-flow:row wrap;justify-content:center;gap:1rem;counter-reset:Element}.flexbox-item{flex:1;position:relative;padding:12px;border:1px solid #ccc}@media screen and (max-width:980px){.flexbox-item{flex-basis:33,3333%}}@media screen and (max-width:680px){.flexbox-item{flex-basis:100%}}.flexbox-item::before{position:absolute;right:.5rem;bottom:-.5rem;display:flex;justify-content:center;align-items:center;counter-increment:Element 1;content:counter(Element) '';font-size:4rem;font:800 Arial;-webkit-text-fill-color:transparent;-webkit-text-stroke:1px;-webkit-font-smoothing:antialiased;color:rgba(0,0,0,.2);z-index:-1}.flexbox-item:hover{transition:all .6s ease-in;background:var(--hover-bgr,#1e90ff);color:#fff;cursor:pointer!important}