main.photos {
  max-width: var(--site-width);
  margin: 0 auto;
}

main.photos-wide {
  max-width: var(--header-width);
  margin: 0 auto;
}

ul.grid * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

ul.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1rem;
	padding: 0;
	margin: 0;
	list-style: none;
}

ul.grid li {
	margin: 0;
	padding: 0;
	border-radius: 1rem;
	background: var(--accent-1);
	overflow: hidden;
	position: relative;
}

ul.grid li::before {
  content: "Loading...";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--accent-3);
}

ul.grid li.loaded::before {
  display: none;
}

ul.grid img {
	width: 100%;
	display: block;
	object-fit: cover;
	transition: height 0.2s ease;
	opacity: 0;
	transition: opacity 0.3s ease;
}

ul.grid img.visible {
  opacity: 1 !important;
}

ul.grid img:hover {
	-moz-filter: brightness(70%);
	-webkit-filter: brightness(70%);
	filter: brightness(70%);
	transition: ease-in-out 0.25s;
}

@media (max-width: 768px) {
	ul.grid {
		grid-template-columns: repeat(2, 1fr);
	}
}