.map-wrapper {
  grid-area: image;
  width: auto;
  height: 100vh;
  top: 0;
  left: 0;
  position: sticky;
  overflow: hidden;
}

.map-layer img {
  position: absolute;
  top: 0px;
  width: 100%;
  min-height: 100svh;
  object-fit: cover;
}

#map {
	width: 100%;height: 100vh;
}

.marker {
	display: block;width: 60px;height: 60px;
	background-position: center;background-repeat: no-repeat;background-size: cover;
	border: 3px solid #fff;border-radius: 50%;
	z-index: 1;
}

.marker.hidden {display: none;}

.marker::before {position: absolute;width: max-content;max-width: 120px;color: #fff;background-color: hsla(0, 0%, 10%, 1);font-size: calc(var(--fontSize) * 0.8);padding: 3px 6px;}
.marker::after {background-color: hsla(0, 0%, 10%, 1);position: absolute;height: 20px;width: 20px;transform: rotate(-45deg);z-index: -1;}

@media (hover: hover) {
	.marker:hover {z-index: 1000}
	.marker:hover::before {content: attr(data-tt);}
	.marker:hover::after {content: "";}
}
.marker.vTop::before, .marker.vCenter::before {top: 70px;}
.marker.vBottom::before {top: -15px;transform: translateY(-100%);}
.marker.hLeft::before, .marker.hCenter::before {left: 0;}
.marker.hRight::before {right: 0;}

.marker.vTop::after, .marker.vCenter::after {top: 65px}
.marker.vBottom::after {top: -10px;transform: translateY(-100%) rotate(-45deg);}
.marker.hLeft::after, .marker.hCenter::after {left: 18px;}
.marker.hRight::after {right: 16px;}


/* --------------------------------- */
/*   Map screen mobile overrides     */
/* --------------------------------- */

@media only screen and (max-width: 480px) {
	#map {width: 100vw;}
	.marker.big {z-index: 1000;}
	.marker.big::before {content: attr(data-tt);}
	.marker.big::after {content: "";}
  .map-wrapper {
    grid-area: image;
    width: auto;
    height: 100vh;
    top: 0;
    left: 0;
    position: fixed;
    opacity: 1;
  }


	.map-layer img {
		position: sticky;
		top: 0px;
		width: 100%;
		min-height: 100svh;
		object-fit: cover;
		overflow: hidden;
	}


  .footer {
    display:none;
    padding-top: calc(var(--gutter-width) * 2);
    padding-bottom: calc(var(--gutter-width) * 2);
    border-top: 0;
  }

  .info {
    margin-top: 0;
    padding-top: 0;
  }

  .linkList {
    padding-top: 0px;
  }

  .linkList h4:first-child {
    padding-top: 16px;
  }

  h3 {
    padding: 0;
    margin-bottom: 0;
    height: 0px;
    overflow: hidden;
    display: none;
  }

  .pageTemplate {
    grid-template-rows: auto 75svh auto auto auto;
    grid-template-areas:
      "menu menu"
      "image image"
      "info info"
      "header header"
      "footer footer";
  }
}

/* -------------------------- */
/*   Map Thumbnails           */
/* -------------------------- */

.description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;

  width: 192px;
  height: 64px;

  text-align: center;
  color: white;

  user-select: none;
  z-index: 3;
}

.description p {
  font-size: calc(var(--fontSize) * 0.8);
}

.textbox {
  /* the one that is seen */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;

  background-color: hsla(0, 0%, 10%, 1);
  border-radius: 4px;

  width: 192px;
  height: 64px;

  z-index: 2;
  opacity: 0;

  transition: opacity 0.3s ease-out 0s;
}

.textbox:after {
  /* the tail */

  background-color: hsla(0, 0%, 10%, 1);
  content: "";
  position: absolute;

  height: 20px;
  width: 20px;

  bottom: -4px;

  transform: rotate(-45deg);
}

.tooltip {
  width: 192px;
  height: 128px;

  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;

  position: absolute;
  top: 0%;
  /* left: -100%; */
}

.map-thumbnail {
  position: absolute;
  display: block;

  height: 64px;
  width: 64px;

  overflow: hidden;
  cursor: pointer;
}

.map-thumbnail:hover {
  height: 128px;
  width: 192px;
  overflow: visible;
  transform: translate(-64px, -64px);
  z-index: 100;
}

.map-thumbnail:hover .tooltip {
  flex-direction: column;
}

.map-thumbnail img {
  display: block;
  box-sizing: border-box;
  position: absolute;
  width: 64px;
  height: 64px;

  border: 3px solid white;
  border-radius: 50%;

  overflow: hidden;
  object-fit: cover;
  z-index: 4;
}

.map-thumbnail:hover img {
  width: 76px;
  height: 76px;

  left: 50%;
  bottom: -6px;

  transform: translate(-50%, 0);
}

.map-thumbnail:hover .textbox {
  opacity: 1;
  transform: translate(0, -16px);
  transition: opacity 0.5s ease-out 0s;
}

/* dummy positions */

.one {
  top: 15vh;
  left: 28vw;
}

.two {
  top: 25vh;
  left: 12vw;
}

.three {
  top: 8vh;
  left: 67vw;
}

.four {
  top: 50vh;
  left: 25vw;
}

.five {
  top: 35vh;
  left: 5vw;
}

.six {
  top: 53vh;
  left: 74vw;
}

.seven {
  top: 62vh;
  left: 9vw;
}

/* ******* */