body{margin:0;padding:0;height:100vh;font-family:Montserrat,sans-serif}a{text-decoration:none;color:inherit}:root{--col1: 1fr;--col2: 1fr;--col3: 1fr;--row1: 1fr;--row2: 1fr;--row3: 1fr;--cl-main: gray;--cl-text: white}.grid{display:grid;grid-template-columns:var(--col1) var(--col2) var(--col3);grid-template-rows:var(--row1) var(--row2) var(--row3);height:100vh;transition:all .2s;background-color:var(--cl-main)}.grid:has(.item:nth-child(3n+1):hover){--col1: 2fr}.grid:has(.item:nth-child(3n+2):hover){--col2: 2fr}.grid:has(.item:nth-child(3n+3):hover){--col3: 2fr}.grid:has(.item:nth-child(n+1):nth-child(-n+3):where(:hover,:focus)){--row1: 2fr}.grid:has(.item:nth-child(n+4):nth-child(-n+6):where(:hover,:focus)){--row2: 2fr}.grid:has(.item:nth-child(n+7):nth-child(-n+9):hover){--row3: 3fr}.item{text-align:center;display:grid;align-content:center;overflow:hidden;font-size:6rem;text-rendering:optimizeLegibility}.item:where(:hover,:focus){margin-top:-.05em;margin-bottom:.05em;scale:1.03;z-index:2;box-shadow:-15px -15px 12px #ddd;transition:margin-top .3s cubic-bezier(.61,1,.88,1),margin-bottom .3s cubic-bezier(.61,1,.88,1)}