.slider-gallery-wrap {
	position: relative;
	width: 100%;
	overflow: hidden;
	aspect-ratio: 16/9;

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	.title-overlay {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 1rem;
		font-size: 1.25rem;
		font-weight: 700;
		background-color: rgba(0, 0, 0, 0.2);
		backdrop-filter: blur(4px);
		color: white;
		text-align: center;
	}

	.prev-btn,
	.next-btn {
		position: absolute;
		background-color: rgba(0, 0, 0, .2);
		backdrop-filter: blur(4px);
		transition: all .250s ease-in-out;
		display: grid;
		place-content: center;
		color: #FFF;
		border-radius: 8px;
		line-height: 1;
		padding: 0.5rem;
		top: 50%;
		transform: translateY(-50%);

		&:hover {
			background-color: rgba(0, 0, 0, .4);
		}

	}

	.prev-btn {
		left: 0.5rem;
	}

	.next-btn {
		right: 0.5rem;
	}

	.slider-dots {
		position: absolute;
		bottom: 5rem;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		gap: 8px;

		.dot {
			width: .75rem;
			height: .5rem;
			border-radius: 4px;
			background-color: rgb(226 232 240 / 50%);
			transition: all .250s ease-in-out;

			&:hover {
				background-color: #7dd3fc;
			}

			&.is-active {
				width: 1.75rem;
				background-color: #0ea5e9;
			}
		}
	}
}