html, body {
overflow-x: clip;
}
body {
background: #EBE6E3;
margin: 0;
}
main { margin-inline: auto; }
header {
position: absolute;
}
.sr-only {
display: block;
clip: rect(0 0 0 0); 
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap; 
width: 1px;
} button {
-webkit-appearance: none;
border-radius: 0;
text-align: inherit;
background: none;
box-shadow: none;
padding: 0;
cursor: pointer;
border: none;
color: inherit;
font: inherit;
} .map-section {
padding-top: 4.75rem;
display: flex;
justify-content: flex-start;
align-items: flex-end; }
.map-section:before {
content:'';
background: #69A5C8;
height: 4.75rem;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
.map-section__map {
flex: 1 1 25em;
max-width: 60em;
background: #EBE6E3;
}
.map-section__list {
background: #EBE6E3;
flex: 0 1 30em;
margin-bottom: calc(25rem + 0.5vw);
margin-left: -10em;
position: relative;  
z-index: 1;
}
.map-section__list h2 {
color: #00338f; 
}
.map-section__key {
flex: 0 1 17.5em;   
background: #EBE6E3;
margin-bottom: calc(13rem + 0.5vw);
margin-left: -30rem;
position: relative;
z-index: 1;
}
.map-section__slider {
background: #B2CEDA;
display: none;
max-width: 100%;
}
@media(max-width: 960px) {
.map-section {
flex-direction: column;
}
.map-section__list {
display: none;
}
.map-section__slider {
display: block;
}
} .map {
display: grid;
}
.map img,
.map svg {
display: block;
max-width: 100%;
}
.map > * {
grid-area: 1/1;
} .map__house-btn {
position: absolute;
top: var(--y);
left: var(--x);
width: calc(var(--width)/var(--map-width) * 100%);
z-index: 1;
touch-action: manipulation;
}
.map__house-btn svg {
display: block;
width: 100%;
}
.map__house-btn path[fill="#00338F"],
.map__house-btn path[fill="#00338F"] {
transition: fill 0.25s ease-in-out;
}
.map__house-btn[aria-expanded="true"] path[fill="#00338F"],
.map__house-btn:focus-visible path[fill="#00338F"] {
fill: #340c08;
transition-duration: 0.1s;
}
@media(pointer: fine) {
.map__house-btn:hover path[fill="#00338F"] {
fill: #340c08;
transition-duration: 0.1s;
}
}
.map__house-btn[data-house="k"] {
clip-path: url(#house-btn-clip-k);
}
.map__house-btn[data-house="l"] {
clip-path: url(#house-btn-clip-l);
}
.map__house-btn[data-house="n"] {
clip-path: url(#house-btn-clip-n);
} .map__popups {
--pointer-height: 2.1em;
--pointer-width: calc(var(--pointer-height) * (65/76));
position: relative; }
.map-popup {
position: absolute;
top: var(--y);
left: var(--x);
width: 0;
height: 0;
color: #002e89; z-index: 10;
transition: 0.3s ease-in-out;
}
@media(max-width: 960px) {
.map-popup {
display: none !important;
}
}
.map-popup[aria-hidden="true"] {
opacity: 0;
transform: translateY(1rem);
pointer-events: none;
} .map-popup::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: var(--pointer-width);
height: var(--pointer-height);
transform: translate(-50%, -100%);
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 65 76' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M63.7549 0.5L63.46 1.19531L32.96 73.1953L32.5 74.2822L32.04 73.1953L1.54004 1.19531L1.24512 0.5H63.7549Z' fill='%23EBE6E3' stroke='%23002E89' stroke-width='2'/%3E%3C/svg%3E%0A");
background-size: 100% 100%;
mask-image: linear-gradient(white, white);
mask-mode: luminance;
mask-size: 100% calc(100% - 1px);
mask-position: 0% 1px;
mask-repeat: no-repeat;
z-index: 2;
}
.map-popup__inner {
position: absolute;
top: calc((-1 * var(--pointer-height)) + 3.5px);
left: calc(-1 * var(--pointer-width));
width: max-content;
max-width: 20rem;
transform: translate(0, -100%);
border: 1px solid;
border-radius: 1em;
background: #EBE6E3;
overflow: clip;
z-index: 1;
}
.map-popup__inner a:hover {
color: inherit;
}
.map-popup__img img {
height: auto;
}
.map-popup__content {
padding: 0.5em 1em 1em;
}
.map-popup__heading {
margin-block: 0 0.5em;
}
.map-popup__desc p {
margin: 0;
}
.map-popup__desc > p + p {
margin-block-start: 0.5em;
} .map-popup--flipped[aria-hidden="true"] {
transform: translateY(-1rem);
}
.map-popup--flipped::before {
transform: translate(-50%, 0%) rotate(180deg);
}
.map-popup--flipped .map-popup__inner {
top: auto;
bottom: calc((-1 * var(--pointer-height)) + 3.5px);
transform: translate(0, 100%);
} .map-section__list ol {
list-style-type: "";
padding-inline: 0;
color: #002e89;
column-count: 2;
column-gap: 50px
}
.map__list-btn {
font-family: "larken", sans-serif;
font-weight: 300;
display: grid;
grid-template-columns: 2em auto;
transition: color 0.25s ease-in-out;
}
.map__list-btn[aria-expanded="true"],
.map__list-btn:hover,
.map__list-btn:focus-visible {
color: #340c08;
transition-duration: 0.1s;
} .map-slider.swiper {
background
overflow: visible;
height: 100%; 
max-height: 100vw;
min-height: 0;
min-width: 0;
max-width: 100vw; 
width: 100%;
}
.map-slider .swiper-wrapper {
max-height: 100%;
height: 100%;
display: flex;
}
.map-slider .swiper-slide {
transition: opacity 0.3s ease-in-out;
width: auto;
flex-shrink: 0;
display: block;
height: 100%;
max-height: 100%;
}
.map-slider .swiper-slide:not(.swiper-slide-active) {
opacity: 0.5;
}
.map-slide {
width: max-content;
padding-bottom:2rem;
max-width: 25rem;
margin-inline: auto;  background: #B2CEDA;
overflow: clip;
}
.map-slide .map-popup__img {
max-height: 15rem;
overflow: hidden;
}
.map-slide .map-popup__img img {
display: block;
height: 100%;
width: 100%;
object-fit: cover;
}
.hide-before::before {
display: none !important;
}