* {
	 box-sizing: border-box;
}
 body {
	 padding-top: 1rem;
	 background-color: #22223a;
}
 img {
	 max-width: 100%;
	 vertical-align: top;
}
 .gallery {
	 display: flex;
	 flex-flow: column;
	 gap: 8px;
	 margin: 8px auto;
	 max-width: 800px;
	 min-width: 300px;
	 position: relative;
	 padding-top: calc(62.5% + 8px);
}
 @media screen and (min-width: 800px) {
	 .gallery {
		 padding-top: calc(500px + 8px);
	}
}
 .gallery__img {
	 position: absolute;
	 top: 0;
	 left: 0;
	 opacity: 0;
	 transition: opacity 0.3s ease-in-out;
	 border-radius: 8px;
}
 .gallery__nav {
	 display: flex;
	 justify-content: center;
	 gap: 4px;
}
 .gallery__thumb {
	 display: block;
	 flex: 0 0 auto;
	 width: calc(20% - 4px);
	 scroll-snap-align: start;
	 padding: 4px;
	 cursor: pointer;
}
 .gallery__thumb img {
	 border-radius: 4px;
	 box-shadow: 0 0 0 0 #33c6eb;
	 transition: box-shadow 0.3s cubic-bezier(0.41, -0.01, 0.33, 1.69);
}
 .gallery__items {
	 display: flex;
	 gap: 4px;
	 flex-wrap: nowrap;
	 overflow-x: auto;
	 padding-bottom: 8px;
	 scroll-snap-type: x mandatory;
}
 .gallery__items::-webkit-scrollbar {
	 height: 8px;
}
 .gallery__items::-webkit-scrollbar-track {
	 background-color: rgba(255, 255, 255, 0.1);
	 border-radius: 4px;
}
 .gallery__items::-webkit-scrollbar-thumb {
	 background-color: #606aa9;
	 border-radius: 4px;
}
 .gallery__selector {
	 margin: 0;
	 position: relative;
	 appearance: none;
}
 .gallery__selector::after {
	 content: "";
	 display: block;
	 width: 8px;
	 height: 8px;
	 margin: 4px;
	 background-color: rgba(255, 255, 255, 0.3);
	 border-radius: 50%;
	 cursor: pointer;
}
 .gallery__selector:checked::after {
	 outline-offset: 2px;
	 background-color: #33c6eb;
	 outline: 2px solid rgba(255, 255, 255, 0.1);
}
 .gallery__selector:checked + .gallery__img {
	 opacity: 1;
}
 .gallery:has(#img-1:checked) label[for="img-1"] img {
	 box-shadow: 0 0 0 4px #33c6eb;
}
 .gallery:has(#img-2:checked) label[for="img-2"] img {
	 box-shadow: 0 0 0 4px #33c6eb;
}
 .gallery:has(#img-3:checked) label[for="img-3"] img {
	 box-shadow: 0 0 0 4px #33c6eb;
}
 .gallery:has(#img-4:checked) label[for="img-4"] img {
	 box-shadow: 0 0 0 4px #33c6eb;
}
 .gallery:has(#img-5:checked) label[for="img-5"] img {
	 box-shadow: 0 0 0 4px #33c6eb;
}
 .gallery:has(#img-6:checked) label[for="img-6"] img {
	 box-shadow: 0 0 0 4px #33c6eb;
}
 .gallery:has(#img-7:checked) label[for="img-7"] img {
	 box-shadow: 0 0 0 4px #33c6eb;
}
 .gallery:has(#img-8:checked) label[for="img-8"] img {
	 box-shadow: 0 0 0 4px #33c6eb;
}