@charset "UTF-8";

div.parking-area { display:flex; flex-direction:row; flex-wrap:wrap; gap:0 5px; justify-content:space-between; }
div.parking-area div { padding:5px 0; width:calc((100% - 15px) / 4); }
div.parking-area div h3 { margin:0 0 5px; color:#fff; font-size:1.6rem; text-align:center; }
div.parking-area div span.car { margin-left:5px; width:calc(100% - 10px); background:#fff; font-size:3rem; font-weight:bold; text-align:center; display:inline-block; }

div.parking-area div span.full { color:#F15A24; }
div.parking-area div span.empty { color:#0092D9; }
div.parking-area div span.closed { color:#777; }
div.parking-area div span.stop { color:#777; }
div.parking-area div.roof-parking { background:linear-gradient(90deg, #007ec6 33.3%, #f9bf00 33.3%, #f9bf00 66.6%, #59a833 66.6%); }
div.parking-area div.main-parking { background:linear-gradient(90deg, #2c64c8 0%, #2c64c8 50%, #eb5a5a 50%, #eb5a5a 100%); }
div.parking-area div.annex-parking { background-color:#cd82bf; }
div.parking-area div.flat-parking { background-color:#ef8337; }



@media screen and (max-width: 768px) {

div.parking-area { display:flex; flex-direction:row; flex-wrap:wrap; gap:5px 0; justify-content:space-between; }
div.parking-area div { padding:5px; width:100%; display:flex; justify-content:space-between; align-items:center; }
div.parking-area div h3 { margin:0; font-size:1.5rem; width:calc(90% - 110px); text-align:left; display:inline; }
div.parking-area div span.car { margin-left:0; padding:0 20px; width:auto; background:#fff; font-size:2.4rem; font-weight:bold; text-align:left; display:inline; }

}