:root {
	--spacing: 120px;
	@media (max-width: 991px) {
		--spacing: 80px;
	}
}

.single-product {display: flex; flex-direction: column; gap: var(--spacing);}

.product-header {width: 100%; height: 480px; display: flex; justify-content: center; align-items: center; position: relative; background-size: cover; background-repeat: no-repeat;}
.product-header::after {content: ''; position: absolute; width: 100%; height: 100%; background: #00000099;}
.product-principal-title {margin-bottom: 24px; color: #fff; font-family: var(--font-secondary);}
@media (max-width: 991px) {
	.product-header {height: 280px;}
}

.product-box {margin-top: calc(120px * -1 + 80px);}

.product-levels {background: var(--primary); padding: 40px 0; font-family: var(--font-secondary);}
.level-title {font-size: 20px; color: #fff; margin-bottom: 20px; font-weight: 500; letter-spacing: -0.8px; text-align: center;}
.line {display: flex; justify-content: space-between; align-items: center; position: relative;}
.line::after {content: ''; height: 4px; width: 100%; left: 0; top: 50%; transform: translateY(-50%); background: #fff; position: absolute;}
.line .value-wrapper {z-index: 1; position: relative; }
.line .value-wrapper:last-child {transform: translateX(2px);}
.dot {width: 12px; height: 12px; display: block; background: #fff; border-radius: 50%;}
.product-levels .value {width: 56px; height: 56px; border: 2px solid #fff; background: var(--primary); color: #fff; display: flex; justify-content: center; align-items: center; border-radius: 50%; font-size: 32px; font-weight: 700;}

.product-content-blocks img {max-width: 100%; height: auto; border-radius: 24px;}
.block-title {margin-bottom: 40px;}
.row-block:not(:last-child) {margin-bottom: var(--spacing);}
.row-block:nth-child(even) .col-block-text {order: 1; margin-left: auto;}
.row-block:nth-child(odd) .col-block-text {margin-right: auto;}
@media (max-width: 991px) {
	.row-block .col-block-text {order: 2;}
	.block-title {margin-bottom: 8px;}
}