/* =========================
RESET
========================= */
*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
background:black;
color:#fff;
overflow-x:hidden;
}

/* =========================
MODERN HERO
========================= */
.gallery-hero{
padding:90px 8% 70px;
display:grid;
grid-template-columns:1.1fr .9fr;
gap:50px;
align-items:center;
border-bottom:1px solid rgba(255,255,255,.06);
}

/* LEFT */
.hero-content span{
font-size:12px;
letter-spacing:5px;
text-transform:uppercase;
color:#ffdc84;
display:block;
margin-bottom:18px;
}

.hero-content h1{
font-size:62px;
line-height:1.05;
margin-bottom:18px;
}

.hero-content p{
font-size:18px;
line-height:1.8;
color:#cfcfcf;
max-width:620px;
margin-bottom:28px;
}

/* BUTTON */
.back-btn{
display:inline-block;
padding:14px 24px;
border-radius:50px;
text-decoration:none;
background:#ffdc84;
color:#050505;
font-weight:600;
transition:.3s ease;
}

.back-btn:hover{
transform:translateY(-3px);
}

/* RIGHT HERO IMAGE */
.hero-image{
border-radius:26px;
overflow:hidden;
border:1px solid rgba(255,255,255,.08);
background:#111;
}

.hero-image img{
width:100%;
height:auto;
display:block;
aspect-ratio:16/10;
object-fit:cover;
}

/* =========================
FAST GALLERY GRID
========================= */
.gallery-wrap{
padding:70px 8% 100px;
}

.gallery-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px;
}


/* CARD */
.gallery-card{
background:linear-gradient(145deg,#111,#1a1a1a);
border-radius:22px;
overflow:hidden;
border:1px solid rgba(255,255,255,.05);
transition:.35s ease;
padding:18px;
}


/* CARD IMAGE BOX */
.gallery-card img{
width:100%;
height:320px;
object-fit:contain;
object-position:center;
display:block;
border-radius:18px;
background:radial-gradient(circle at center,#222,#111);
padding:12px;
}
/* CONTENT */
.gallery-info{
padding:18px;
}

.gallery-info span{
font-size:11px;
letter-spacing:3px;
text-transform:uppercase;
color:#ffdc84;
display:block;
margin-bottom:8px;
}

.gallery-info h3{
font-size:20px;
font-weight:600;
}

/* =========================
PERFORMANCE SPEED OPTIMIZE
========================= */
img{
content-visibility:auto;
}

/* =========================
RESPONSIVE
========================= */

@media(max-width:1000px){

.gallery-hero{
grid-template-columns:1fr;
}

.gallery-grid{
grid-template-columns:repeat(2,1fr);
}

.hero-content h1{
font-size:48px;
}

}

@media(max-width:700px){

.gallery-hero{
padding:80px 24px 50px;
gap:30px;
}

.gallery-wrap{
padding:50px 24px 80px;
}

.gallery-grid{
grid-template-columns:1fr;
}

.hero-content h1{
font-size:34px;
}

.hero-content p{
font-size:16px;
}

}