@import '../../../styles/essentials';

.lift-product {
	background-color: $light;

	.container {
		display: flex;
		flex-wrap: wrap;
		padding: 5em 1em;
		justify-content: space-between;
		align-items: center;

		@include st {
			padding: 5em;
		}

		.image-box {
			flex-basis: 100%;
			height: 300px;
			max-height: 300px;
			background-color: white;
			padding: 1em;

			img {
				width: 100%;
				height: 100%;
				object-fit: contain;
			}

			@include st {
				flex-basis: 25%;
				height: auto;
				max-height: none;
			}
		}
		.content-box {
			flex-basis: 100%;

			.info {
				font-weight: 600;
			}

			.product-description {
				margin-bottom: 2em;
			}

			@include st {
				flex-basis: 70%;
			}
		}
	}
}


// ── v2 development indicator ─────────────────────────────────────────────────
// Remove this block once the v2 design is finalised.

.lift-product-v2 {
    outline: 3px dashed #22c55e;
    background-color: rgba(34, 197, 94, 0.06) !important;
}