/*
* Layout
*/
.clothing {
	padding-block: 5rem;
	position: relative;
	z-index: 1;
	background-color: #070707;
}

/*
* Background
*/
.clothing .background {
	display: grid;
	align-content: center;
	justify-content: start;
	text-align: left;
	pointer-events: none;
}

.clothing .bgr-text {
	opacity: .03;
}

.clothing .background .bgr-text:nth-child(1) {
	font-size: max(30vw, 12rem);
	letter-spacing: .17em;
}

.clothing .background .bgr-text:nth-child(2) {
	font-size: max(25vw, 10rem);
	padding-left: 10vw;
}

/*
* Content
*/
.clothing .section-title {
	font-size: min(7rem, 25vw);
	letter-spacing: .15em;
	margin-right: -.15em;
}

.clothing p {
	line-height: 2;
	letter-spacing: .1em;
}

#main .clothing-highlight {
	font-size: 1.5rem;
}

/*
* Items
*/
.clothing-items {
	display: grid;
	margin-top: 3rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: flex-end;
	gap: 7vw;
}

.clothing-item:nth-child(2) {
	padding-bottom: 5rem;
}

.clothing-img {
	position: relative;
	aspect-ratio: .75;
	background-color: #202020;
}

.clothing-img:after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
	width: 100%;
	height: 70%;
	background: linear-gradient(to bottom, rgba(7, 7, 7, 0), rgba(7, 7, 7, 1));
	box-shadow: 0 2rem 1rem rgba(7, 7, 7, 1);
}

/*
* Responsive
*/
@media (max-width: 768px) {

	.clothing-items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.clothing-item:nth-child(2) {
		padding-bottom: 0;
		grid-column: span 2;
		grid-row: 1;
	}

	.clothing-item:nth-child(2) .clothing-img {
		width: 70%;
		margin-inline: auto;
	}

}

@media (max-width: 480px) {

	.clothing-item:nth-child(2) .clothing-img {
		width: 100%;
	}

}