* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    scroll-padding-top: 0px;
}

body {
    background-color: rgba(250, 244, 232);
  }

main{

    width:min(1500px,95%);

    margin:auto;

    padding:60px 0;

}

.stories{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:35px;

}

.storyCard{

    position:relative;

    cursor:pointer;

    overflow:hidden;

    border-radius:18px;

    box-shadow:0 10px 25px rgba(0,0,0,.18);

    transition:.35s;

}

.cover{

    width:80%;

    display:block;

    margin: 0 auto;

    transition:.5s;

}

.storyOverlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:25px;

    color:white;

    background:linear-gradient(
        transparent,
        rgba(0,0,0,.75)
    );

    opacity:0;

    transition:.35s;

}

.storyCard:hover{

    transform:translateY(-8px);

}

.storyCard:hover .cover{

    transform:scale(1.08);

}

.storyCard:hover .storyOverlay{

    opacity:1;

}

.storyPanel{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    backdrop-filter:blur(8px);

    display:flex;

    justify-content:center;

    align-items:flex-end;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9999;

}

.storyPanel.open{

    opacity:1;

    visibility:visible;

}

.storyContent{

    width:min(1400px,95%);

    height:92vh;

    background:rgba(250, 244, 232);

    border-radius:25px 25px 0 0;

    overflow-y:auto;

    transform:translateY(100%);

    transition:.45s;

    position:relative;

    box-shadow:0 20px 70px rgba(0,0,0,.3);

}

.storyPanel.open .storyContent{

    transform:translateY(0);

}

.storyTop{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:50px;

    padding:60px;

}

.storyHeader{

    text-align:center;

    padding:60px 60px 20px;

}




.storyHeader h1{

    font-size:52px;

    margin:20px 0 40px;

}


.storyHeader img{

    width:min(900px,100%);

    border-radius:20px;

}

.storyImage img{

    width:100%;

    border-radius:18px;

    display:block;

}

.storyInfo{

    line-height:1.8;

}

.storyInfo h1{

    font-size:42px;

    margin:15px 0 30px;

}

.storyInfo span{

    color:#999;

    letter-spacing:2px;

    text-transform:uppercase;

}

.storyMeta{

    margin-top:12px;

    margin-bottom:25px;

    color:#777;

    font-size:15px;

}

.storyMeta span{

    letter-spacing:0;

    text-transform:none;

    color:#666;

}

.closeStory{

    position:absolute;

    right:25px;

    top:20px;

    border:none;

    background:none;

    font-size:42px;

    cursor:pointer;

}

.gallerySection{

    padding:0 60px 60px;

}

.gallerySection h2 {
    padding-bottom: 10px;
}



.galleryGrid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    grid-auto-rows:180px;

    gap:20px;

}

.galleryItem:first-child{

    grid-row:span 2;

}

.galleryItem{
    position: relative;

    overflow:hidden;

    border-radius:15px;

    cursor:pointer;

}


.galleryItem img{

    width:100%;

    /* height:250px; */
    height:100%;

    object-fit:cover;

    display:block;

    transition:.4s;

}


.galleryItem:hover img{

    transform:scale(1.08);

}




.videoItem img{

    width:100%;

    height:100%;

    object-fit:cover;

    filter:brightness(.75);

}


.videoPreview{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:70px;

    height:70px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,.85);

    font-size:35px;

}

 .storyCard{

    opacity:0;

    transform:translateY(30px) scale(.97);

    filter:blur(8px);

    transition:
        opacity .8s ease,
        transform .8s ease,
        filter .8s ease;

    will-change:transform, opacity, filter;

}

 .storyCard.show{

    opacity:1;

    transform:translateY(0) scale(1);

    filter:blur(0);

}

.blur-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(6px);
    z-index: 25;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}