.hero-item {
	--tw-bg-opacity: 1;

	position: relative;
	overflow: hidden;
	background-color: rgb(247 247 247 / var(--tw-bg-opacity, 1));
}

.hero-item > a:first-child {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.hero-item .hero-item__container {
	position: absolute;
	display: block;
	width: 100%;
	padding-top: 3.625em;
	padding-left: 1.3125em;
	padding-right: 1.3125em;
	text-align: center;
	inset: 0;
}

.hero-item .hero-item__container .hero-item__btn {
	display: inline-block;
	border: var(--cta-border-color, #fff);
	background-color: var(--cta-bg-color, #fff);
	color: var(--cta-text-color, #000);
	white-space: nowrap;
}

.hero-item .hero-item__container .hero-item__cta {
	position: absolute;
	bottom: 25%;
	left: 0;
	right: 0;
	width: 100%;
	text-align: center;
}

.hero-item .screenreader {
	display: none;
}

.hero-item img {
	display: block;
	width: 100%;
	height: auto;
}

@media only screen and (min-width: 768px) {
	.hero-item .hero-item__container {
		padding-top: 4.0625em;
		padding-left: 3.375em;
		padding-right: 3.375em;
	}

	.hero-item .hero-item__container .hero-item__btn {
		font-size: 1.125rem;
	}

	.hero-item .hero-item__container .hero-item__cta {
		bottom: 11%;
	}
}

@media only screen and (min-width: 1025px) {
	.hero-item .hero-item__container {
		padding-top: 5.9375em;
		padding-left: 6em;
		padding-right: 6em;
	}

	.hero-item .hero-item__container .hero-item__cta {
		bottom: 20%;
	}
}

@media only screen and (min-width: 1401px) {
	.hero-item .hero-item__container {
		padding-left: 9.125em;
		padding-right: 9.125em;
	}
}

@media only screen and (min-width: 1281px) {
	.hero-item .hero-item__container .hero-item__cta {
		bottom: 18%;
	}
}