div.profile-images {
	position: relative;
	width: 100%;
}

div.profile-images__slider {
  position: relative;
	overflow: hidden;
  width: 100%;
}

div.profile-images__slider-wrapper {
  position: relative;
  display: grid;
  z-index: 2;
}

div.profile-images__slider-wrapper.scroll-snap-parent {
	scroll-snap-type: x mandatory;
	overflow-y: hidden;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}

div.profile-images__slider-wrapper .scroll-snap-child {
	scroll-snap-align: start;
}

div.profile-images__slider-wrapper::-webkit-scrollbar {
  display: none;
}

div.profile-images__image {
	position: relative;
	height: 0;
	padding-top: 100%;
}

div.profile-images__image img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	aspect-ratio: 1;
}

div.profile-images__thumbnails {
	margin-top: 15px;
}

button.profile-images__thumbnail {
	position: relative;
	margin: 0;
	padding: 0;
	background: transparent;
	border: none;
	opacity: 0.3;
	transition: opacity 200ms ease-in-out;
}

button.profile-images__thumbnail:hover {
	box-shadow: unset;
}

button.profile-images__thumbnail:active,
button.profile-images__thumbnail:hover,
button.profile-images__thumbnail.is-active {
	opacity: 1 !important;
}

button.profile-images__thumbnail + button.profile-images__thumbnail {
	margin-left: 10px;
}

/* Mobile  */
@media (max-width: 699px) {
	div.profile-images__slider {
		max-height: 100vh;
	}
	
	div.profile-images__slider-wrapper:not(.is-lonely) {
		grid-template-columns: repeat(var(--count), 80%);
		gap: calc(20 / var(--design-vw-sm, 390) * 100%);
	}
}

/* TABLET */
@media (min-width: 700px) and (max-width: 899px) {
	div.profile-images__slider {
		max-height: 100vh;
	}
	
	div.profile-images__slider-wrapper:not(.is-lonely) {
		grid-template-columns: repeat(var(--count), 66%);
		gap: calc(20 / var(--design-vw-sm, 390) * 100%);
	}
}

/* DESKTOP  */
@media (min-width: 900px) {
	div.profile-images__slider {
		max-height: calc(586 * (100vw / var(--design-vw-lg, 1440)));
	}
	
	div.profile-images__slider-wrapper {
		grid-template-columns: repeat(var(--count), 100%);
	}
	
	div.profile-images__slider-wrapper.scroll-snap-parent {
		overflow-x: hidden;
	}
	
	button.profile-images__thumbnail {
		max-width: 55px;
	}
}