.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 90%;
}

.image {
    overflow: hidden;
    position: relative;
    aspect-ratio: 3 / 2;
    box-shadow: 1px 1 px 10px rgba(0, 0, 0, 0.1);
    /* Default aspect ratio for horizontal images */
}

.image img {
    width: 100%; 
    height: 100%;
    display: block;
    object-fit:fill;
}

.image.vertical {
    grid-row: span 2;

    /* Vertical images span two rows */
    aspect-ratio: 2 / 2.8;
    /* Adjusted for vertical aspect ratio */
}

.image.horizontal {
    aspect-ratio: 3 / 2; 
    width: 100%;
    height: 100%;
}

@media (max-width: 768px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr);
        /* Two images per row on medium screens */
    }
}

@media (max-width: 480px) {
    .gallery {
        grid-template-columns: 1fr;
        /* One image per row on small screens */
    }
}