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

body {
    font-family: Arial, sans-serif;
    background-color: #121212; /* Dark background */
    color: #ffffff; /* Light text color */
}

.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Three columns for larger screens */
    gap: 10px; /* Space between items */
}

.gallery-item {
    position: relative;
    width: 100%;
    padding-top: 100%; /* This makes the item square */
    overflow: hidden; /* Hide overflow */
}

.gallery-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images cover the square without distortion */
}

/* Responsive for mobile screens */
@media (max-width: 600px) {
    .gallery {
        grid-template-columns: repeat(3, 1fr); /* Maintain three columns on mobile */
        grid-auto-rows: minmax(150px, auto); /* Set minimum row height */
        overflow-y: hidden; /* Prevent scrolling */
        max-height: calc(150px * 2); /* Limit height to fit two rows of images */
    }
}