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

.box-02 {
	padding: 90px 0;
}
.box-03 {
	.scontainer-content {
		> .row {
			align-items: center;
		}
		.col-right {
			margin-top: 0;
		}
	}
}
.box-04 {
	margin-bottom: 160px;

	#product-colors {
		.col-right {
			.color-tiles-grid {
				&.color-tiles-grid-top {
					grid-template-columns: 1fr;
					margin-bottom: 50px;
				}
				&.color-tiles-grid-bottom {
					.color-tiles {
						&:nth-child(1) {
							.color-tiles-data {
								&::before {
									background-color: $cBlack;
								}
								&::after {
									content: 'URBAN';
									color: $cTxtWhite;
								}
							}
						}
						&:nth-child(2) {
							.color-tiles-data {
								&::before {
									background-color: #ece9e2;
								}
								&::after {
									content: 'FUTURE';
									color: $cTxtBlack;
								}
							}
						}
						&:nth-child(3) {
							.color-tiles-data {
								&::before {
									background-color: #9c703b;
								}
								&::after {
									content: 'MODERN BOHO';
									color: $cTxtWhite;
								}
							}
						}
						.action-btn {
							left: 100px;
						}

						.color-tiles-data {
							position: relative;
							padding-left: 100px;

							&::before {
								content: '';
								position: absolute;
								top: 0;
								left: 0;
								width: 90px;
								height: 170px;
								border-top-left-radius: 100px;
								border-bottom-left-radius: 100px;
								box-sizing: border-box;
							}
							&::after {
								position: absolute;
								top: 85px;
								left: 55px;
								width: 120px;
								font-size: 20px;
								font-weight: 300;
								text-align: center;
								letter-spacing: 5px;
								transform: translate(-50%, -50%) rotate(-90deg);
							}

							li {
								img {
									width: 44px !important;
									height: 44px;
									min-height: 44px;
								}
							}
						}
					}
				}
			}

			.color-tiles-title {
				h2 {
					font-weight: 300;
					font-size: 20px;
					margin-bottom: 25px;
				}
			}
		}

		#scontainer-68 {
			.col-right {
				.color-tiles-grid {
					grid-template-columns: 1fr;
				}
			}
		}
	}
}