@charset "UTF-8";
/* CSS Document */

.slider-container {
	padding: 2rem;
	}
.slider-wrapper {
	position: relative;
	max-width: 30rem;
	margin: 2.5rem auto 5rem auto;
	}
.slider {
	display: flex;
	aspect-ratio: 4 / 3;
	overflow-x: auto;
	scroll-snap-type: x mandatory; 
	scroll-behavior: smooth;
	}
.slider img {
	flex: 1 0 100%;
	scroll-snap-align: start;
	object-fit: cover;
	}
.slider-nav {
	display: flex;
	column-gap: 1rem;
	position: absolute;
	bottom: -2rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	}
.slider-nav a {
	width: .8rem;
	height: .8rem;
	border-radius: 50%;
	background-color: #fdc021;
	opacity: 60%;
	transition: opacity ease 250ms;
	margin: auto .075rem;
	}
.slider-nav a:hover {
	opacity: 100%;
	}