.gallery { display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(8, 5vw); grid-gap: 0px; margin: 0; padding: 0; } .gallery-img { width: 100%; height: 100%; object-fit: cover; margin: 0; padding: 0; cursor: pointer; } .gallery-item { margin: 0; padding: 0; } .gallery-item-1 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 4; margin: 5px; padding: 5px; } .gallery-item-2 { grid-column-start: 3; grid-column-end: 7; grid-row-start: 1; grid-row-end: 7; margin: 5px; padding: 5px; } .gallery-item-3 { grid-column-start: 7; grid-column-end: 12; grid-row-start: 1; grid-row-end: 5; margin: 5px; padding: 5px; } .gallery-item-4 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 4; grid-row-end: 8; margin: 5px; padding: 5px; } .gallery-item-5 { grid-column-start: 7; grid-column-end: 9; grid-row-start: 5; grid-row-end: 10; margin: 5px; padding: 5px; } .gallery-item-6 { grid-column-start: 9; grid-column-end: 12; grid-row-start: 5; grid-row-end: 10; margin: 5px; padding: 5px; } .gallery-item-7 { grid-column-start: 3; grid-column-end: 7; grid-row-start: 7; grid-row-end: 10; margin: 5px; padding: 5px; } .gallery-item-8 { grid-column-start: 7; grid-column-end: 12; grid-row-start: 10; grid-row-end: 14; margin: 5px; padding: 5px; } .gallery-item-9 { grid-column-start: 4; grid-column-end: 7; grid-row-start: 10; grid-row-end: 12; margin: 5px; padding: 5px; } .gallery-item-10 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 10; grid-row-end: 12; margin: 5px; padding: 5px; } .gallery-item-11 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 8; grid-row-end: 10; margin: 5px; padding: 5px; } .gallery-item-12 { grid-column-start: 7; grid-column-end: 11; grid-row-start: 14; grid-row-end: 16; margin: 5px; padding: 5px; } .gallery-item-13 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 14; grid-row-end: 17; margin: 5px; padding: 5px; } .gallery-item-14 { grid-column-start: 4; grid-column-end: 7; grid-row-start: 14; grid-row-end: 16; margin: 5px; padding: 5px; } .gallery-item-15 { grid-column-start: 4; grid-column-end: 7; grid-row-start: 16; grid-row-end: 18; margin: 5px; padding: 5px; } .gallery-item-16 { grid-column-start: 1; grid-column-end: 7; grid-row-start: 12; grid-row-end: 14; margin: 5px; padding: 5px; } .gallery-item-17 { grid-column-start: 7; grid-column-end: 12; grid-row-start: 16; grid-row-end: 18; margin: 5px; padding: 5px; } .gallery-item-18 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 17; grid-row-end: 18; margin: 5px; padding: 5px; } @media only screen and (max-width: 850px) { /*.gallery { grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(20, 10vw); }*/ .gallery-item { margin: 0.25em; padding: 0em; } }