.grid-container{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}.grid-container>*{position:relative;flex-grow:1;height:var(--height,unset);min-width:var(--width,unset)}:root{--cols:1;@media (min-width:700px){--cols:2}@media (min-width:1200px){--cols:3}}.responsive-grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));padding:0 1rem 1rem}.grid-item-title{margin-bottom:1rem;font-size:1.5rem;font-weight:200;line-height:1.8rem}.grid-item{padding:1.5rem;@media (max-width:700px){padding-left:0;padding-bottom:1.5rem;padding-right:0;padding-top:1.5rem}}@media (max-width:699px){.grid-item:not(:last-child){border-bottom:1px solid var(--grey)}}@media (min-width:700px) and (max-width:1199px){.grid-item:nth-child(odd){border-right:1px solid var(--grey)}.grid-item:nth-child(-n+4){border-bottom:1px solid var(--grey)}}@media (min-width:1200px){.grid-item:nth-child(3n+1){border-right:1px solid var(--grey)}.grid-item:nth-child(3n){border-left:1px solid var(--grey)}.grid-item:nth-child(-n+3){border-bottom:1px solid var(--grey)}}.area{position:relative;display:flex;justify-content:center;align-items:center;height:100%;background-color:rgba(0,0,0,.3);padding:0;transition:all .3s ease-in-out}.area:hover{background-color:rgba(0,0,0,.6)}.area h2{position:absolute;font-size:2.5rem;user-select:none;transition:opacity .3s ease-in-out}.area p,.area:hover h2{opacity:0}.area p{padding:var(--padding);transition:opacity .3s ease-in-out;cursor:default}.area:hover p{opacity:1}