.grid-wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-auto-rows: 200px; 
    grid-auto-flow: dense;
}

.grid-item {
    position: relative; 
    display: block; 
    overflow: hidden; 
}

.grid-item > a {
    display: block; 
    width: 100%;
    height: 100%;
}

.grid-item > a > img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: center; 
    border-radius: 5px;
    display: block; 
    transition: transform 0.3s ease;
}

.grid-item > a:hover > img {
    transform: scale(1.05); 
}

.grid-item.wide {
    grid-column: span 2;
}

.grid-item.tall {
    grid-row: span 2;
}

.grid-item.big {
    grid-column: span 2;
    grid-row: span 2;
}

.grid-item.regular {
    grid-column: span 1;
    grid-row: span 1;
}

@media (max-width: 768px) {
    .grid-wrapper {
        grid-template-columns: 1fr;
    }

    .grid-item.wide,
    .grid-item.tall,
    .grid-item.big,
    .grid-item.regular {
        grid-column: span 1;
        grid-row: auto;
    }
}