@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Lato:wght@300;400;700&display=swap');
@import 'variables';
@import '_mixins';

.page-content {
	overflow: hidden;
}

.box-03 {
	#product-popup-box {
		.row {
			&:first-child {
				transform: translateX(-25%);

				&::before {
					max-width: 600px;
					left: 60%;
				}
			}
			.box-data {
				padding-bottom: 50px;

				ul {
					li {
						@include respond-above(lg) {
							&:nth-child(1) {
								left: 150px;
								top: 0px;
								right: 200px;

								p {
									max-width: 250px;
								}
							}
							&:nth-child(2) {
								left: 10px;
								top: 100px;
								right: 350px;
								p {
									max-width: 380px;
								}
							}
							&:nth-child(3) {
								left: 270px;
								top: 200px;
								right: 130px;
								p {
									max-width: 540px;
								}
							}
							&:nth-child(4) {
								left: 60px;
								top: 265px;
								right: 350px;
								p {
									max-width: 240px;
								}
							}
							&:nth-child(5) {
								left: 140px;
								top: 415px;
								right: 170px;

								p {
									max-width: 375px;
								}
							}
							&:nth-child(6) {
								left: 270px;
								top: 540px;

								&::after {
									display: none;
								}

								p {
									max-width: 580px;

									margin-left: 0;
									margin-right: auto;
									padding-top: 120px;
									padding-left: 25px;
									text-align: left;

									&::after {
										right: auto;
										left: 9px;
										top: 17.5px;
										height: calc(100% - 18px);
									}
								}
							}
							&:nth-child(7) {
								left: 40px;
								top: 560px;
								right: 300px;
								p {
									max-width: 350px;
								}
							}
						}

						@include respond-below(lg) {
							&:nth-child(1) {
								&::before {
									content: '1';
									left: 200px;
									top: 25px;
								}
							}
							&:nth-child(2) {
								&::before {
									content: '2';
									left: 20px;
									top: 95px;
								}
							}
							&:nth-child(3) {
								&::before {
									content: '3';
									left: 280px;
									top: 160px;
								}
							}
							&:nth-child(4) {
								&::before {
									content: '4';
									left: 75px;
									top: 260px;
								}
							}
							&:nth-child(5) {
								&::before {
									content: '5';
									left: 165px;
									top: 405px;
								}
							}
							&:nth-child(6) {
								&::before {
									content: '6';
									left: 265px;
									top: 545px;
								}
							}
							&:nth-child(7) {
								&::before {
									content: '7';
									left: 110px;
									top: 565px;
								}
							}
						}

						@include respond-below(xs) {
							&:nth-child(1) {
								&::before {
									left: 220px;
									top: 5px;
								}
							}
							&:nth-child(2) {
								&::before {
									left: 20px;
									top: 80px;
								}
							}
							&:nth-child(3) {
								&::before {
									left: 270px;
									top: 125px;
								}
							}
							&:nth-child(4) {
								&::before {
									left: 80px;
									top: 190px;
								}
							}
							&:nth-child(5) {
								&::before {
									left: 150px;
									top: 405px;
								}
							}
							&:nth-child(6) {
								&::before {
									left: 260px;
									top: 530px;
								}
							}
							&:nth-child(7) {
								&::before {
									left: 108px;
									top: 545px;
								}
							}
						}
					}
				}
			}
		}
	}
}

.box-05 {
	.color-tiles {
		&-data {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
			column-gap: 50px;
			row-gap: 17px;
		}
	}
}

.box-06 {
	.color_pallet {
		position: relative;

		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 12px;
			bottom: 0;
			width: 1px;
			background: #6c6d70;
		}

		.color_pallet_title {
			position: relative;
			padding-left: 240px;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				width: 213px;
				height: 1px;
				background: #6c6d70;
				transform: translateY(-50%);
			}

			h2 {
				font-weight: 400;
				font-size: 25px;
				line-height: 25px;
				letter-spacing: 0.15em;
				text-transform: uppercase;
				margin-bottom: 0;
			}
		}
		.color_pallet_data {
			padding-left: 60px;
			padding-top: 50px;
		}

		@include respond-below(sm) {
			.color_pallet_title {
				padding-left: 150px;

				&::before {
					width: 120px;
				}
			}
		}
		@include respond-below(xs) {
			.color_pallet_title {
				padding-left: 90px;

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