#location_display_area {display: grid;grid-template-columns: repeat(4, 1fr);grid-template-rows: masonry; gap: 32px;}
#location_display_area a:hover { text-decoration: none; }
#location_display_area a:hover .title {color: #FFF;}
.panel {position: relative; display: grid;grid-template-rows: 1fr auto; border: #d2e7f4 1px solid; border-radius: 6px; background-color: #d2e7f4; padding: 8px; text-decoration: none;}

.panel .title {position: relative; grid-row: 1; grid-column: 1; color: #696969; font-size: 16px; font-weight: 700; margin-bottom: 16px; opacity: 1;}
.panel .distance {grid-row: 2;grid-column: 1;background-color: rgba(255,255,255,.5);padding: .2em .5em;justify-self: start; font-size: 12px; color:#858585;}
.panel .time {grid-row: 2;grid-column: 1;background-color: rgba(255,255,255,.5);padding: .2em .5em;justify-self: end; font-size: 12px; color:#858585;}

@media only screen and (max-width: 1024px) {
    .location_row {font-size: 11px !important;}
    #location_display_area {display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: masonry; gap: 16px;}
    .panel .title {font-size: 14px;}
}