.banner-full-width-overflow {
	--banner-overflow: -5rem; 

	background-color: var(--bg-alt-color);
	margin-top: calc(var(--banner-overflow) * -1.6);
}

.banner-full-width-overflow__wrapper {
	display: flex;
	gap: 1rem;
	align-items: center;
}

.banner-full-width-overflow__image {
	margin-top: var(--banner-overflow);
	width: 100%;
	max-width: 450px;
	align-self: end;
}

.banner-full-width-overflow__content {
	margin-block: 2rem;
}

.banner-full-width-overflow__description {
	margin-bottom: 1.5rem;
}

.banner-full-width-overflow__description p:last-child {
	margin-bottom: 0;
}

.banner-full-width-overflow__wrapper--right {
	flex-direction: row-reverse;
}

.banner-full-width-overflow__button-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.banner-full-width-overflow__button-wrapper .banner-full-width-overflow__button-item {
	background-color: var(--secondary-color);
	color: #fff;
	padding: 1rem 3rem;
	border: 1px solid transparent;
	border-radius: 8px;
	transition: background-color .3s ease-out;

	&:is(:focus, :hover) {
		background-color: var(--secondary-color-500) !important;
		color: #fff !important;
		text-decoration: none;
	}
}

.banner-full-width-overflow__button-wrapper .banner-full-width-overflow__button-item:not(:first-of-type) {
	background-color: transparent;
	color: var(--secondary-color);
	border-color: var(--secondary-color);
}


@media (width <= 991px) {

	.banner-full-width-overflow {
		margin-top: 3rem;
	}

	.banner-full-width-overflow__image {
		margin-top: 0;
	}

	.banner-full-width-overflow__wrapper {
		flex-direction: column-reverse;
	}
}