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

body {
    font-family: system-ui, sans-serif;
    background-color: #f6f6f6;
    background: linear-gradient(135deg, #e1f5fe, #87B4E8);
    padding: 20px;
    display: flex;
    flex-direction:column;
    align-items: center;
    /* justify-content: center; */
}

.gallery-title {
  font-family: "Bitcount Grid Single", system-ui;
  font-optical-sizing: auto;
  font-weight: 450;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "CRSV" 0.5,
    "ELSH" 0,
    "ELXP" 0;
}

/* Masonry container */
.container {
    column-count: 4;        /* Number of columns on large screens */
    column-gap: 16px;       /* Space between columns */
    max-width: 1400px;
    width: 100%;
}

/* Each image block */
.image-item {
    display: inline-block;  /* Needed for column layout */
    width: 100%;
    margin-bottom: 16px;    /* Space below each image */
    break-inside: avoid;    /* Prevent image from splitting across columns */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    background: white;
}

/* Image styling */
.image-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    object-fit: cover;
}

/* Responsive tweaks */
@media (max-width: 1200px) {
    .container {
        column-count: 3;
    }
}

@media (max-width: 800px) {
    .container {
        column-count: 2;
    }
}

@media (max-width: 500px) {
    .container {
        column-count: 1;
    }
}