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

body {

    font-family: Inter, Arial, sans-serif;

    background: #fafafa;

    color: #1f1f1f;

    line-height: 1.6;
}


/* ==========================
   HERO
========================== */

.hero{

    width:100%;

    display:grid;

    grid-template-columns:1.25fr 1fr;

    min-height:100vh;
}

.hero-images{

    display:grid;

    grid-template-columns:1fr 1fr;

    grid-template-rows:50vh 50vh;

    gap:6px;

    background:white;

    padding:6px;
}

.hero-images img{

    width:100%;

    height:100%;

    object-fit:cover;
}

.hero-images img:first-child{

    grid-row:span 2;
}

.hero-info{

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:80px;

    background:white;
}

.date{

    font-size:14px;

    text-transform:uppercase;

    letter-spacing:3px;

    color:#8b8b8b;

    margin-bottom:18px;
}

.hero h1{

    font-size:68px;

    font-weight:700;

    line-height:1;

    margin-bottom:30px;
}

.hero p{

    max-width:520px;

    font-size:19px;

    color:#666;

    line-height:1.8;
}


/* ==========================
   MAIN
========================== */

main{

    width:min(1500px,94vw);

    margin:80px auto;
}


/* ==========================
   UPLOAD
========================== */

.upload{

    margin-bottom:90px;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;
}

.upload h2{

    font-size:38px;

    margin-bottom:14px;
}

.upload p{

    color:#777;

    margin-bottom:35px;

    max-width:600px;
}

#fileInput{

    display:none;
}

button{

    background:#111;

    color:white;

    border:none;

    font-size:17px;

    padding:18px 48px;

    cursor:pointer;

    transition:.25s;
}

button:hover{

    background:#2d2d2d;
}

.progress-container{

    width:min(520px,90vw);

    height:4px;

    background:#e7e7e7;

    margin-top:35px;

    overflow:hidden;
}

.progress-bar{

    width:0;

    height:100%;

    background:#111;

    transition:width .15s linear;
}

#status{

    margin-top:20px;

    color:#666;
}


/* ==========================
   GALLERY
========================== */

.gallery-section{

    margin-bottom:80px;
}

.gallery-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;
}

.gallery-header h2{

    font-size:34px;

    font-weight:600;
}

#galleryGrid{

    column-count:4;

    column-gap:10px;
}

#galleryGrid img{

    width:100%;

    display:block;

    margin-bottom:10px;

    break-inside:avoid;

    transition:.25s;

    cursor:pointer;
}

#galleryGrid img:hover{

    opacity:.9;

    transform:scale(.99);
}

#loader{

    display:none;

    text-align:center;

    padding:40px;

    color:#777;
}


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

@media (max-width:1100px){

.hero{

    grid-template-columns:1fr;
}

.hero-info{

    padding:60px 40px;
}

.hero h1{

    font-size:54px;
}

#galleryGrid{

    column-count:3;
}

}


/* ==========================
   PHONE
========================== */

@media (max-width:700px){

.hero{

    min-height:auto;
}

.hero-images{

    grid-template-columns:1fr 1fr;

    grid-template-rows:180px 180px;
}

.hero-info{

    padding:40px 24px;
}

.hero h1{

    font-size:42px;
}

.hero p{

    font-size:16px;
}

main{

    width:92vw;

    margin:50px auto;
}

.upload h2{

    font-size:30px;
}

button{

    width:100%;

    padding:18px;

    font-size:16px;
}

.progress-container{

    width:100%;
}

.gallery-header h2{

    font-size:28px;
}

#galleryGrid{

    column-count:2;

    column-gap:8px;
}

#galleryGrid img{

    margin-bottom:8px;
}

}