.grid-container{flex-wrap:wrap;justify-content:center;gap:1rem;display:flex}.grid-container>*{height:var(--height,unset);min-width:var(--width,unset);flex-grow:1;position:relative}
:root{--cols:1}@media (min-width:700px){:root{--cols:2}}@media (min-width:1200px){:root{--cols:3}}.responsive-grid{grid-template-columns:repeat(var(--cols), minmax(0, 1fr));padding:0 1rem 1rem;display:grid}.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){.grid-item{padding:1.5rem 0}}@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{background-color:#0000004d;justify-content:center;align-items:center;height:100%;padding:0;transition:all .3s ease-in-out;display:flex;position:relative}.area:hover{background-color:#0009}.area h2{-webkit-user-select:none;user-select:none;font-size:2.5rem;transition:opacity .3s ease-in-out;position:absolute}.area:hover h2{opacity:0}.area p{opacity:0;padding:var(--padding);cursor:default;transition:opacity .3s ease-in-out}.area:hover p{opacity:1}