html {
	scroll-behavior: smooth;
}

body {
	min-width: 304px;
}

.custom-text-description {
	font-size: 0.95rem;
}

@media screen and (max-width: 400px) {
	.custom-text-description {
		font-size: 0.875rem;
	}
}

@media screen and (min-width: 80rem) {
	.xl-grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	.xl-flex {
		display: flex !important;
	}
	.xl-hidden {
		display: none !important;
	}
	.xl-flex-row {
		flex-direction: row !important;
	}
}

.custom-next {
	margin-bottom: 3.1rem;
	background: white;
	padding-top: 0.75rem;
	border-top: 1px dashed #e0e0e0;
	padding-bottom: 12px;
}

.custom-min-image-width {
	min-width: 160px;
}

button:focus-visible,
a:focus-visible,
.custom-focus-visible:focus-visible {
	outline: 2px solid #007bff;
	outline-offset: 2px;
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2);
	transition: outline 0s;
}

.custom-charge-box {
	display: flex;
	position: absolute;
	gap: 20px;
	width: 100%;
	height: 100%;
	overflow: hidden;
	cursor: pointer;
	z-index: 10;
}

.custom-box {
	width: 100%;
	display: flex;
	transform: translateX(-100%);
	transition-duration: 0.5s;
	display: flex;
	align-items: center;
	justify-content: center;
}

.custom-box-text {
	opacity: 0;
	transition-duration: 0.2s;
	transition-delay: 0.6s;
}

.custom-charge-box:hover > .custom-box,
.custom-box-text {
	transform: translateX(0%);
	opacity: 1;
}