body {
    background: #f7f6ee;
    overflow-x: hidden !important;
}

#content1 {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(1,1fr);
    grid-auto-rows: min-content;
    grid-row-gap: 15px;
}

#content2 {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(1,1fr);
    grid-auto-rows: min-content;
    grid-row-gap: 15px;
}

#content3 {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(1,1fr);
    grid-auto-rows: min-content;
    grid-row-gap: 15px;
}

#content1 div, #content2 div, #content3 div, #content4 div {
    height: fit-content;
    overflow: hidden;
    border-radius: 20px;
} 

#content div img {
    width: 100%;
    height: 100%;
}

/* ...............iframe................. */

iframe {
    width: 100%;
    height: 100%;
}

#frame {
    display: none;
    position: fixed; /* changed from absolute */
    top: 0;
    left: 0;
    width: 100%; /* full screen */
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* darker overlay looks cleaner */
    border-radius: 5px; /* full-screen overlay shouldn't have rounded corners */
    z-index: 9999; /* ensures it appears on top of everything */
}

/* The close button container */
#frame div {
    position: absolute;
    z-index: 10000; /* make sure the close button is on top */
    top: 20px;
    right: 20px;
}

/* The close icon itself */
#frame div i {
    font-size: 40px;
    font-weight: bolder;
    color: white;
    cursor: pointer;
}

/* If your popup displays an image or iframe inside #frame, center it */
#frame img,
#frame iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
    border-radius: 15px;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
}

/* .............scrollbar............ */

::-webkit-scrollbar {
    width:0px;
}
/* ::-webkit-scrollbar-track {
    background: #f7f6ee;
}
::-webkit-scrollbar-thumb {
    background: #e6e3c9;
}
::-webkit-scrollbar-thumb:hover {
    background: #dbd8bd;
} */

/* ..................fade.............. */

#fader {
    background: #f7f6ee;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    pointer-events: none;
    animation-duration: 500ms;
    animation-timing-function: ease-in-out;
}

@keyframes fade-out {
    from { opacity: 1 }
      to { opacity: 0 }
}

#fader.fade-out {
    opacity: 0;
    animation-name: fade-out;
}

/* ✅ Always show one column everywhere */
#content,
#content1,
#content2,
#content3,
#content4 {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-auto-rows: min-content;
  grid-row-gap: 20px;
}

/* On screens larger than 768px (tablet and up), make the gallery 40% wide and centered */
@media (min-width: 768px) {
  #content,
  #content1,
  #content2,
  #content3,
  #content4 {
    width: 70%;
    margin: 0 auto; /* centers it horizontally */
  }
}