/* Location Map */
.section-location-map {background:var(--cream); padding-top:180px; padding-bottom:120px;}
.section-location-map-columns {display:grid; grid-template-columns:1fr;}
.map-key {text-align:right;}
.nav-tabs {font-size:13px; margin-bottom:2rem;}
.map {margin-bottom:2rem;}
.map img {width:100%; max-width:unset;}



.key-intro {color: var(--mainBrandColour); font-size:20px; margin:0 0 3rem auto;}
.map-key-list {font-size:14px;  margin:0 0 0 auto;  max-width:260px; }
.map-row {display:grid; align-items:center; justify-content: flex-end; grid-template-columns:1fr 24px;}
.map-col-name {border-bottom:1px solid var(--mainBrandColour); height:100%; line-height:1.1; align-content:center; padding:0.2rem 0.5rem  0.2rem 0;}
.map-col-number {border-bottom:1px solid var(--cream); height:100%; align-content: center; }
.map-col-number>div {background:var(--mainBrandColour); color:var(--white); width:24px; height:24px; display:flex; justify-content:center; align-items:center;}
#pro .key-intro {color: var(--secondaryBrandColour);}
#pro .map-col-name {border-color:var(--secondaryBrandColour);}
#pro .map-col-number>div {background:var(--secondaryBrandColour);}



/* Location Grid */
.section-location-grid {padding-top:180px; padding-bottom:0; position:relative;}
.location-grid {display:grid; gap:1rem; text-align:right;}
.location-grid {grid-template-columns:1fr; grid-template-areas: 
    'lines'
    'c2'
    'c1'
    's2' 
    's1'
    'd2'
    'd1'
    'cy2'
    'cy1'
     'w2'
     'w1'
     'walk'
     'lines2';}

.location-grid>div {font-size:18px; z-index:2;}
.location-grid>div h3 {margin-bottom:0;}
.location-grid>div p {max-width:300px; margin:0 0 0 auto;}
.location-grid>div img {position:relative; z-index:1;}
.location-grid-commuting-txt {grid-area:c1;}
.location-grid-commuting-img {grid-area:c2; aspect-ratio:1/1;}
.location-grid-socialising-txt {grid-area:s1;}
.location-grid-socialising-img {grid-area:s2; aspect-ratio:1/1;}
.location-grid-dining-txt {grid-area:d1;}
.location-grid-dining-img {grid-area:d2; aspect-ratio:1/1;}
.location-grid-cycling-txt {grid-area:cy1;}
.location-grid-cycling-img {grid-area:cy2; aspect-ratio:1/1;}
.location-grid-wellbeing-txt {grid-area:w1;}
.location-grid-wellbeing-img {grid-area:w2; aspect-ratio:1/1;}

.location-grid-lines {grid-area:lines; position:relative; aspect-ratio:auto !important; max-width:50%;}
.location-grid-lines-2 {grid-area:lines2; position:relative; aspect-ratio:auto !important; max-width:50%;}
.location-grid-lines-2 div {width:100%; position:absolute; top:0; left:0; background:url(/images/lines-brown.svg) repeat-y 0 0; background-size:100% auto; z-index:1;}
.location-grid-lines div {width:100%; position:absolute; top:-180px; left:0; background:url(/images/lines-brown.svg) repeat-y 0 0; background-size:100% auto; z-index:1;}

.location-grid-walk {grid-area:walk; aspect-ratio:auto !important;}
.location-grid-walk .table {margin:0 0 0 auto;}

.location-mask {position:relative; mask-image:url(/images/shape-cream.svg); mask-size:100%; mask-repeat:no-repeat; z-index:2; margin-top:1rem; max-width:97%;}
.location-mask img {width:100%; max-width:unset;}


@media (min-width:576px) {
  /* Location Grid */
  .location-grid {grid-template-columns:repeat(2, 1fr);
    grid-template-areas: 
    '. lines'
    'c1 c2'
    's1 s2'
    'd1 d2'
    'cy1 cy2'
     'w1 w2'
     'walk walk'
     'lines2 .';}
  .location-grid>div {aspect-ratio:1/1;}
  .location-mask {max-width:70%;}
  .location-grid-lines {max-width:unset;}
  .location-grid-lines-2 {max-width:unset;}
}

@media (min-width:600px) and (max-width:767px) {
  /* Location Map */
  .map-key-list {max-width:100%; display:grid; grid-template-rows:repeat(10, 1fr); column-gap:2rem; grid-auto-flow:column;}
}

@media (min-width:768px) {
  /* Location Grid */
  .location-mask {max-width:60%;}

  /* Location Map */
  .section-location-map-columns {display:grid; grid-template-columns:260px 2fr; gap:2rem;}
  .map-key {order:1;}
  .map {order:2; margin-top:5rem;}
  .key-intro {max-width:250px;}
}


@media (min-width:992px) {
    /* Location Grid */
    .location-grid {grid-template-columns:repeat(3, 1fr);
    grid-template-areas: 
    'c1 c2 lines'
    '. s1 s2'
    'd2 . .'
    'd1 cy1 cy2'
     'w1 w2 .'
     'lines2 walk walk';}
    .location-grid-lines-2 div {height:calc(100% + 220px);}
    .location-grid-walk {padding-bottom:150px;}
    .location-grid {/*overflow:hidden;*/}
    .location-mask {position:absolute; max-width:38%; bottom:-1px; left:0;}
}


@media (min-width:1200px) {
   /* Location Grid */
   .location-mask {max-width:48%;}
   .location-grid-walk {min-height:35vw;}
}