.theoasso-theobills{
	background: url("../../assets/images/theo-bills-bg.png") no-repeat center / cover;
	color: var(--wp--preset--color--base);
	padding: 110px 32px 0;
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	text-align: center;
	position: relative;
	overflow: visible;
}

/* Avoid horizontal scrollbars from 100vw breakout (supported browsers). */
@supports ( overflow: clip ){
	.theoasso-theobills{
		overflow-x: clip;
	}
}

/* Full-bleed breakout even inside constrained layouts */
.theoasso-theobills.alignfull,
.wp-block-theoasso-theobills.alignfull{
	width: calc(100vw - 64px);
	max-width: calc(100vw - 64px);
	margin-left: calc(50% - 50vw + 32px);
	margin-right: calc(50% - 50vw + 32px);
}

.theoasso-theobills__inner{
	width: 100%;
	max-width: 920px;
	margin: 0 auto;
}

.theoasso-theobills__title{
	margin: 0;
	font-family: var(--wp--preset--font-family--google-sans-flex);
	font-weight: 500;
	font-size: 48px;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--purple);
}

.theoasso-theobills__description{
	margin: 16px auto 0;
	font-family: "Google Sans Flex","sans-serif";
	font-style: Light;
	max-width: 540px;
	color: var(--wp--preset--color--main-bg);
	font-size: 20px;
	line-height: 30px;
	white-space: pre-line;
}

.theoasso-theobills__phones{
	position: static;
	margin: 40px auto 0;
	height: min(520px, 55vh);
	max-width: 720px;
}

/* Ensure the images still position from the block wrapper */
.theoasso-theobills__phones .theoasso-theobills__phone{
	position: absolute;
}

.theoasso-theobills__phone{
	position: absolute;
	bottom: 0px;
	height: auto;
	pointer-events: none;
	user-select: none;
}

.theoasso-theobills__phone--back{
	left: 40%;
	opacity: 0.95;
    width: min(230px, 48vw);
	max-width: 400px;
}

.theoasso-theobills__phone--front{
	left: 45%;
    bottom: -40px;
	transform: rotate(6deg);
    width: min(300px, 48vw);
	max-width: 250px;

}

@media (max-width: 720px){
	.theoasso-theobills{
		padding-top: 80px;
	}
	.theoasso-theobills__title{
		font-size: 38px;
	}
	.theoasso-theobills__phones{
		height: min(420px, 50vh);
	}
	.theoasso-theobills__phone--back{
		left: 2%;
		transform: rotate(-2deg);
		width: min(300px, 48vw);
	}
	.theoasso-theobills__phone--front{
		left: 36%;
		transform: rotate(6deg);
		width: min(250px, 48vw);
	}
}

@media (max-width: 440px){
	.theoasso-theobills__phones{
		margin-top: 48px;
		height: 360px;
	}
	.theoasso-theobills__phone--back{
		left: -6%;
	}
	.theoasso-theobills__phone--front{
		left: 22%;
	}
}