.hero-carousel {
	box-sizing: border-box;

	/*  */
	border: 2px solid var(--wak-dark-border-subtle);
	background-size: contain;

	box-shadow: 0px 21px 34px -17px rgba(69, 76, 79, 0.2);
	border-radius: 38px;

	min-height: 312px;

	overflow: hidden;

  margin-bottom: 2rem;
}

.hero-carousel__item {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;

	position: relative;

	background: linear-gradient(278.95deg, #2aa1b0 25.6%, #65c79a 105.96%);

	/* url("/img/hero.svg") no-repeat left center, */
}

.hero-carousel__item-content {
	padding-right: 2rem;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;

	font-weight: 500;
	font-size: 1.25rem;
	/* identical to box height */
	text-align: center;
	letter-spacing: 0.12em;

	color: #ffffff;
}

.hero-carousel__item-content h1 {
	font-size: 2rem;
	font-weight: 700;
	color: var(--wak-white);
	letter-spacing: 6%;

	line-height: 1.75;
	text-align: center;
	letter-spacing: 0.06em;
}

.hero-carousel__item-content .cta {
	font-size: 0.8rem;
	line-height: 1;
}

.hero-carousel__items {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: 1fr;
}

.hero-carousel__illustration {
	overflow: visible;
	min-height: 312px;
	/* position: absolute; */
	/* max-height: 312px;
  width: auto;
  height: 100%; */
	/* width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%; */
	/* position:absolute;
  top: 0;
  left: 0;
  bottom: 0; */
}

#hero {
	max-height: 312px;
}