/* =========================================
DESIGNER PREVIEW SECTION
========================================= */

.designer-preview-section {
background: #f0edeb;
color: #111;
padding: clamp(3rem, 7vw, 5rem) 0;
overflow: hidden;
}

/* =========================================
HEADING
========================================= */

.designer-preview-heading {
width: min(900px, calc(100% - 2rem));
margin: 0 auto 3rem;
text-align: center;
}

.designer-preview-heading h2 {
margin: 0;
font-family: 'Pretzel', sans-serif;
font-size: clamp(2.8rem, 7vw, 6rem);
line-height: .9;
font-weight: normal;
text-transform: uppercase;
}

.designer-preview-heading p:last-child {
max-width: 680px;
margin: 1rem auto 0;
font-size: .95rem;
line-height: 1.7;
color: rgba(0,0,0,.62);
}

/* =========================================
SLIDER
========================================= */

.designer-preview-slider {
position: relative;
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
}

.designer-preview-row {
display: flex;
gap: 1rem;
overflow-x: auto;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
padding: 0 2rem 1rem;
scrollbar-width: none;
}

.designer-preview-row::-webkit-scrollbar {
display: none;
}

/* =========================================
CARDS
========================================= */

.designer-preview-card {
flex: 0 0 clamp(340px, 28vw, 480px);
height: clamp(480px, 55vw, 700px);

position: relative;
overflow: hidden;
border-radius: 1rem;

background: #111;
color: #fff;
text-decoration: none;

scroll-snap-align: start;
isolation: isolate;
}

.designer-preview-card img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;

filter: grayscale(0%);
transform: scale(1.03);

transition:
transform .8s ease,
filter .6s ease;
}

.designer-preview-card::after {
content: "";
position: absolute;
inset: 0;

background:
linear-gradient(
to top,
rgba(0,0,0,.88) 0%,
rgba(0,0,0,.35) 35%,
rgba(0,0,0,.05) 70%
);

z-index: 1;
}

.designer-preview-card div {
position: absolute;
left: 1.5rem;
right: 1.5rem;
bottom: 1.5rem;
z-index: 2;
}

.designer-preview-card span {
display: block;

font-family: "Rahim";
font-size: clamp(2.8rem, 4vw, 4.5rem);
line-height: .9;
letter-spacing: .02em;
}

.designer-preview-card small {
display: block;
margin-top: .65rem;

font-family: "Courier New", monospace;
font-size: .72rem;
letter-spacing: .18em;
text-transform: uppercase;
opacity: .75;
}

.designer-preview-card:hover img {
transform: scale(1.1);
filter: grayscale(100%);
}

/* =========================================
ARROWS
========================================= */

.designer-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 50;

width: 56px;
height: 56px;

border: none;
border-radius: 50%;

background: rgba(0,0,0,.85);
color: #fff;

font-size: 2rem;
cursor: pointer;

display: flex;
align-items: center;
justify-content: center;

transition:
background .3s ease,
color .3s ease;
}

.designer-arrow:hover {
background: var(--accent);
color: #111;
}

.designer-arrow-prev {
left: 1rem;
}

.designer-arrow-next {
right: 1rem;
}

/* =========================================
SEE MORE
========================================= */

.designer-preview-link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

gap: .75rem;
margin-top: 2rem;

text-decoration: none;
}

.designer-preview-link span {
width: 100px;
height: 100px;

display: flex;
align-items: center;
justify-content: center;

background: #111;
color: #fff;

border-radius: 50%;

font-size: 3rem;
line-height: 1;

transition:
background .3s ease,
color .3s ease;
}

.designer-preview-link small {
font-family: "Courier New", monospace;
font-size: .72rem;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(0,0,0,.65);

transition: color .3s ease;
}

.designer-preview-link:hover span {
background: var(--accent);
color: #111;
}

.designer-preview-link:hover small {
color: #111;
}

/* =========================================
TABLET
========================================= */

@media (max-width: 900px) {

.designer-preview-card {
flex-basis: 70vw;
height: 540px;
}

.designer-arrow {
display: none;
}

}

/* =========================================
MOBILE
========================================= */

@media (max-width: 600px) {

.designer-preview-row {
padding-inline: 1rem;
}

.designer-preview-card {
flex-basis: 82vw;
height: 460px;
}

.designer-preview-card span {
font-size: 2.5rem;
}

}