@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 {
				&::before {
					max-width: 600px;
					left: 60%;
				}
			}
			.box-data {
				ul {
					li {
						@include respond-above(lg) {
							&:nth-child(1) {
								left: 220px;
								top: 5px;
								right: 210px;

								p {
									max-width: 320px;
								}
							}

							&:nth-child(2) {
								left: 120px;
								top: 120px;
								right: 60px;

								p {
									max-width: 480px;
								}
							}

							&:nth-child(3) {
								left: 435px;
								top: 210px;
								right: 210px;

								p {
									max-width: 310px;
								}
							}

							&:nth-child(4) {
								left: 300px;
								top: 310px;
								right: 320px;

								p {
									max-width: 180px;
								}
							}

							&:nth-child(5) {
								left: 80px;
								top: 370px;
								right: 210px;

								p {
									max-width: 230px;
								}
							}

							&:nth-child(6) {
								left: 360px;
								top: 430px;
								right: 60px;

								p {
									max-width: 350px;
								}
							}

							&:nth-child(7) {
								left: 430px;
								top: 540px;
								right: 140px;

								p {
									max-width: 250px;
								}
							}

							&:nth-child(8) {
								left: 290px;
								top: 525px;
								right: 470px;

								&::after {
									display: none;
								}

								p {
									max-width: 300px;

									margin-left: 0;
									padding-top: 50px;
									padding-left: 25px;
									padding-top: 60px;
									text-align: left;

									&::after {
										left: 9px;
										top: 18px;
										height: calc(100% - 18px);
									}
								}
							}
						}

						@include respond-below(lg) {
							&:nth-child(1) {
								&::before {
									content: '1';
									left: 230px;
									top: 15px;
								}
							}
							&:nth-child(2) {
								&::before {
									content: '2';
									left: 120px;
									top: 130px;
								}
							}
							&:nth-child(3) {
								&::before {
									content: '3';
									left: 445px;
									top: 220px;
								}
							}
							&:nth-child(4) {
								&::before {
									content: '4';
									left: 335px;
									top: 300px;
								}
							}
							&:nth-child(5) {
								&::before {
									content: '5';
									left: 100px;
									top: 350px;
								}
							}
							&:nth-child(6) {
								&::before {
									content: '6';
									left: 365px;
									top: 430px;
								}
							}
							&:nth-child(7) {
								&::before {
									content: '7';
									left: 425px;
									top: 535px;
								}
							}
							&:nth-child(8) {
								&::before {
									content: '8';
									left: 290px;
									top: 545px;
								}
							}
						}

						@include respond-below(xs) {
							&:nth-child(1) {
								&::before {
									left: 150px;
									top: 15px;
								}
							}
							&:nth-child(2) {
								&::before {
									left: 65px;
									top: 100px;
								}
							}
							&:nth-child(3) {
								&::before {
									left: 263px;
									top: 140px;
								}
							}
							&:nth-child(4) {
								&::before {
									left: 210px;
									top: 190px;
								}
							}
							&:nth-child(5) {
								&::before {
									left: 80px;
									top: 220px;
								}
							}
							&:nth-child(6) {
								&::before {
									left: 230px;
									top: 260px;
								}
							}
							&:nth-child(7) {
								&::before {
									left: 260px;
									top: 340px;
								}
							}
							&:nth-child(8) {
								&::before {
									left: 170px;
									top: 340px;
								}
							}
						}
					}
				}
			}
		}
	}
}

.box-05 {
	.scontainer-content {
		.row {
			&:nth-child(1) {
				.color-tiles {
					.color-tiles-data {
						display: grid;
						grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
						gap: 30px;
					}
				}
			}
			&:nth-child(3) {
				.color-tiles {
					.color-tiles-data {
						display: grid;
						grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
						gap: 20px;

						li {
							flex-direction: column;
							align-items: flex-start;
							row-gap: 15px;
						}
					}
				}
			}
			&:nth-child(4) {
				.color-tiles {
					&::after {
						content: '';
						position: absolute;
						right: 0;
						top: 12px;
						bottom: 0;
						width: 1px;
						background: #6c6d70;
					}
					.color-tiles-data {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						padding-right: 60px;
						padding-bottom: 50px;

						&::before {
							content: '';
							position: absolute;
							right: 0;
							bottom: 0;
							width: 213px;
							height: 1px;
							background: #6c6d70;
						}

						p {
							font-weight: 400;
							font-size: 20px;
							line-height: 30px;
							text-align: right;
							letter-spacing: 0.07em;
							width: 100%;
							max-width: 280px;
							margin-bottom: 0;
							margin-top: -25px;
						}

						@include respond-below(sm) {
							flex-direction: column;

							p {
								margin-top: 0;
								text-align: center;
							}
						}
					}
				}
			}
		}
	}
}