eng.vidok.com/layout/style-scss/facades.scss

@import '_mixins';
@import '_variables';

.box-01 {
	#product-preview-box {
		.product-preview-box {
			.scontainer-content {
				.product-preview {
					.product_info_text {
						ul {
							padding: 10px 0px 10px 40px;
							max-height: fit-content !important;

							li {
								grid-template-columns: 1fr;

								p {
									line-height: 1.9;

									strong {
										font-weight: 700;
									}
								}
							}

							@include respond-below(md) {
								padding: 0;
							}
						}
					}
				}
			}
		}
	}
}

.box-02 {
	padding: 90px 0;
}

.box-03 {
	margin-bottom: 80px;

	.col-left {
		text-align: right;

		h3 {
			font-size: 30px;
			font-weight: 600;
			text-transform: uppercase;
			max-width: 270px;
			margin-left: auto;
			margin-bottom: 0;
			padding-right: 20px;
		}

		@include respond-below(md) {
			text-align: center;
			margin-bottom: 30px;

			h3 {
				max-width: unset;
				padding: 0;
			}
		}
	}
	.col-right {
		ul {
			margin: 0;
			list-style: none;
			padding: 10px 0 10px 40px;
			border-left: 2px solid $cBlack;

			li {
				&:not(:last-child) {
					margin-bottom: 25px;
				}
				img {
					width: 100%;
					max-width: 100px;
				}

				a {
					font-size: 19px;
					padding: 25px 100px 25px 35px;
					max-width: 250px;

					&::before {
						width: 30px;
					}
				}
			}

			@include respond-below(md) {
				padding: 40px 10px 10px 10px;
				border-top: 2px solid $cBlack;
				border-left: none;
				text-align: center;
			}
		}
	}
}

.box-04 {
	margin-bottom: 50px;

	.row {
		&.row_1 {
			.tile-left {
				img {
					height: 100%;
					object-fit: cover;

					@include respond-below(md) {
						max-width: unset !important;
					}
				}
			}
		}
		&.row_2 {
			.tiles {
				.tile-right {
					padding: 0;

					img {
						height: 100%;
						object-fit: cover;

						@include respond-below(md) {
							max-width: unset !important;
						}
					}
				}
			}
		}
		&.row_3 {
			position: relative;
			padding-bottom: 40px;

			&::before {
				content: '';
				position: absolute;
				bottom: 0;
				left: 15px;
				right: 15px;
				height: 1px;
				background: $cBlack;
			}

			.tile-left {
				img {
					height: 100%;
					object-fit: cover;

					@include respond-below(md) {
						max-width: unset !important;
					}
				}
			}
		}
	}
	.tiles {
		display: grid;
		grid-template-columns: 1fr 1fr;

		.tile-left {
			height: 100%;
			img {
				width: 100%;
				max-width: fit-content;
			}
		}
		.tile-right {
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 70px;
			background: $cLightGray;
			height: 100%;

			h3 {
				color: $cTxtBlack;
				font-size: 25px;
				font-weight: 300;
				margin-bottom: 25px;
			}
			p {
				font-size: 14px;
				font-weight: 300;
				line-height: 2;
				margin-bottom: 0;

				strong {
					font-weight: 700;
				}
			}
		}

		.read-more {
			position: relative;
			display: block;
			color: $cTxtWhite;
			font-size: 40px;
			font-weight: 200;
			background: $cBlack;
			padding: 60px 60px 55px;
			text-align: center;
			width: calc(100% - 1px);

			&::before {
				content: '';
				position: absolute;
				right: calc(50% - 170px);
				top: 50%;
				width: 10px;
				height: 65px;
				background-image: url('/upload/filemanager/Other/big-arrow-bottom-white.svg');
				background-repeat: no-repeat;
				background-size: cover;
				transform: translateY(-50%);
			}
			@include respond-below(md) {
				padding: 50px 50px 45px;
			}
		}

		@include respond-below(md) {
			grid-template-columns: 1fr;

			.tile-right {
				padding: 40px;
			}
		}
	}
}

.box-05 {
	padding-bottom: 140px;

	.row {
		position: relative;
		padding-bottom: 60px;

		&::before {
			content: '';
			position: absolute;
			bottom: 0;
			left: 15px;
			right: 15px;
			height: 1px;
			background: $cBlack;
		}
	}

	.img-zoom {
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		width: 100%;
		max-width: 700px;
		margin-left: auto;
		margin-right: auto;

		h3 {
			color: $cSandDarker;
			font-size: 25px;
			font-weight: 700;
			writing-mode: vertical-rl;
			text-orientation: mixed;
			transform: rotate(180deg);
			margin: 0;
		}

		img {
			width: 100%;
			max-width: fit-content;
		}
	}
}