body {
	> section {
		
		margin-top: calc(var(--gap) * 2);
		display: grid;
		grid-template-columns: 1fr 1fr; 
		background: lightgray;
		
		@media(max-width: 1200px) {
			grid-template-columns: 1fr;
			#map {
				aspect-ratio: 3 / 1;
			}
		}
		
		> div {
			position: relative;
			overflow: clip;
			outline-color: transparent;
			
			display: flex;
			flex-direction: row;
			
			height: 100%;
			
			* {
				z-index: 1;
			}
			
			> figure {
				margin-top: -2px;
				width: 100%;
				position: relative;
				overflow: clip;
				flex: 0 0 100%;
				transition: all 1s ease-in-out;
				background: black;
				
				
				img {
					width: 100%;
					height: 100%;
					object-fit: contain;
					object-position: center;
					display: block;
					aspect-ratio: 4/3;
				}
				*:focus-visible,
				&:focus-visible {
					outline: none;
				}
				
			}
			
			#dots {
				position: absolute;
				left: 50%;
				right: 50%;
				bottom: calc(var(--gap) * 1);
				transform: translate(-50%, -50%);
				display: flex;
				gap: calc(var(--gap) / 1);
				align-content: center;
				justify-content: center;
				list-style: none;
				margin: 0;
				width: 100%;
				
				&:has(*:nth-child(n+10)) {
					gap: calc(var(--gap) * .66);
					li a {max-width: 1.5vw;}
					@media(max-width:1200px) {
						li a {max-width: 2.5vw;}
					}
				}
				&:has(*:nth-child(n+20)) {
					gap: calc(var(--gap) * .5);
					li a {max-width: 1.75vw;}
					@media(max-width:1200px) {
						li a {max-width: 2.25vw;}
					}
				}
				&:has(*:nth-child(n+25)) {
					gap: calc(var(--gap) * .33);
					li a {max-width: 1.5vw;}
					@media(max-width:1200px) {
						li a {max-width: 2vw;}
					}
				}
				&:has(*:nth-child(n+30)) {
					gap: calc(var(--gap) * .25);
					li a {max-width: 1vw;}
					@media(max-width:1200px) {
						li a {max-width: 1.75vw;}
					}
				}
				&:has(*:nth-child(n+35)) {
					gap: calc(var(--gap) * .15);
					li a {max-width: .9vw;}
					@media(max-width:1200px) {
						li a {max-width: 1.55vw;}
					}
				}
				&:has(*:nth-child(n+40)) {
					gap: calc(var(--gap) * .1);
					li a {max-width: .85vw;}
					@media(max-width:1200px) {
						li a {max-width: 1.5vw;}
					}
				}
				
				li {
					margin: 0;
					
					
					a {
						display: inline-block;
						border-radius: 100vw;
						height: var(--gap);
						width: var(--gap);
						background-color: white;/*var(--white);*/
						filter: opacity(.25);
						&:focus-visible,
						&:hover {
							filter: opacity(1);
						}
						&.active {
							background-color: var(--green);
							filter: opacity(1);
						}
					}
				}
			}
			#next, 
			#prev {
				display: none;
				position: absolute;
				top: 50%;
				left: var(--gap);
				transform: translateY(-50%);
				height: 10%;
				aspect-ratio: 1;
				svg {
					fill: var(--green);
					filter: opacity(.5);
					max-height: 100%;
					max-width: 100%;
					transition: all 1s ease-in-out;
					&:hover {
						filter: opacity(1);
						transform: scale(1.2);
					}
				}
			}
			#next {
				left: auto;
				right: var(--gap);
			}
			#fullscreen,
			#pic-counter {
				position: absolute;
				left: var(--gap);
				top: var(--gap);
				padding: calc(var(--gap) / 4) calc(var(--gap) / 2);
				border: 3px solid var(--green);
				color: var(--green);
				background: black;
				font-weight: bold;
				border-radius: 100vw;
				display: none;
			}
			#fullscreen {
				font-size: .75rem;
				text-transform: lowercase;
				text-decoration: none;
				z-index: 999;
				display: flex;
				gap: calc(var(--gap) / 2);
				align-content: center;
				align-items: center;
				justify-content: center;
				svg {
					fill: var(--green);
					height: .75rem;
				}
			}
			&:has(figure:nth-child(n+2)) {
				#next, #prev {
					display: block;
				}
			}
		}
	}
	
	
	> main {
		
		> nav {
			display: flex;
			gap: var(--gap);
			svg {
				height: 1rem;
				margin-right: calc(var(--gap) / 2);
				fill: white;
			}
			*:focus,
			&:focus {
				outline: none;
			}
			@media(max-width:1200px) {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 0 var(--gap);
			}
			@media(max-width:800px) {
				display: grid;
				grid-template-columns: 1fr;
				gap: 0 var(--gap);
			}
		}
		
		> section {
			> * {
				display: flex;
				gap: var(--gap);
				
				> *:first-child {
					flex: 3;
				}

				> * {
					height: auto;
					flex: 2 0;
				}
				@media(max-width:800px) {
					display: grid;
					grid-template-columns: 1fr;
					gap: 0 var(--gap);
				}
			}
		}
		
		h1, .h1, h1 *, .h1 * {
			font-size: 4rem;
			* {
				display: inline;
			}
			a:last-child {
				font-size: .5em;
				display: block;
			}
			&:hover {
				text-decoration: none;
				color: inherit;
			}
		}
		
		h2, .h2, h2 *, .h2 * {
			color: var(--green);
			font-size: 2rem;
			margin: -.25rem 0 var(--gap) 0;
			
			small {
				display: block !important;
				font-size: .5em;
				text-transform: none;
			}
			* {
				color: var(--green);
				display: inline;
			}
			&:hover {
				text-decoration: none;
			}
		}
		h3, .h3 {
			font-size: 1.75rem;
			margin-block: var(--gap);
		}
		textarea {
			resize: vertical !important;
			min-height: 171.5px !important;
		}
	}
	
	dl {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 0 var(--gap);
		dt {
			font-weight: bold;
			text-transform: uppercase;
		}
		svg {
			height: 1em;
		}
	}
	
	sup {
		font-size: .5em !important;
	}
}





.leaflet-popup-content {
	max-width: 500px;
	* {
		white-space: nowrap;
	}
}

#images:fullscreen {
	figure {
		img {
			object-fit: contain !important;
		}
	}
	#fullscreen,
	#dots {
		display: none !important;
	}
	#pic-counter {
		display: block !important;
	}
}

.sold {
	grid-column: full-width;
	display: grid;
	grid-template-columns: var(--grid);
	padding-block: var(--gap);
	
	> * {
		grid-column: content;
	}
	
	position: relative;
	
	&:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,.5);
	}
	#sold {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%) rotate(10deg);
		color: var(--red);
		border: 5px solid var(--red);
		font-size: 3.5rem;
		font-weight: 600;
		text-transform: uppercase;
		background: rgba(255,255,255,.75);
		padding: 0 var(--gap);
	}
}