Romb gallery

selector {
--desktop-image-gap: 10px;
--mobile-image-gap: 10px;
--hover-image-animation-duration: 0.4s;
--hover-image-scale: 1.15;
}

selector .gallery {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(4, 1fr);
gap: var(--desktop-image-gap);
}

selector img {
aspect-ratio: 1;
object-fit: cover;
}

selector .gallery-item {
-webkit-clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
pointer-events: visible;
}

selector .gallery-item:nth-child(1) {
grid-column: 2/4;
grid-row: 1/3;
}

selector .gallery-item:nth-child(2) {
grid-column: 4/6;
grid-row: 1/3;
}

selector .gallery-item:nth-child(3) {
grid-column: 6/8;
grid-row: 1/3;
}

selector .gallery-item:nth-child(4) {
grid-column: 1/3;
grid-row: 2/4;
}

selector .gallery-item:nth-child(5) {
grid-column: 3/5;
grid-row: 2/4;
}

selector .gallery-item:nth-child(6) {
grid-column: 5/7;
grid-row: 2/4;
}

selector .gallery-item:nth-child(7) {
grid-column: 7/9;
grid-row: 2/4;
}

selector .gallery-item:nth-child(8) {
grid-column: 2/4;
grid-row: 3/5;
}

selector .gallery-item:nth-child(9) {
grid-column: 4/6;
grid-row: 3/5;
}

selector .gallery-item:nth-child(10) {
grid-column: 6/8;
grid-row: 3/5;
}

@media (max-width: 767px) {

selector .gallery {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(8, 1fr);
gap: 10px;
}

selector .gallery-item:nth-child(1) {
grid-column: 2/4;
grid-row: 1/3;
}

selector .gallery-item:nth-child(2) {
grid-column: 1/3;
grid-row: 2/4;
}

selector .gallery-item:nth-child(3) {
grid-column: 3/5;
grid-row: 2/4;
}

selector .gallery-item:nth-child(4) {
grid-column: 2/4;
grid-row: 3/5;
}

selector .gallery-item:nth-child(5) {
grid-column: 1/3;
grid-row: 4/6;
}

selector .gallery-item:nth-child(6) {
grid-column: 3/5;
grid-row: 4/6;
}

selector .gallery-item:nth-child(7) {
grid-column: 2/4;
grid-row: 5/7;
}

selector .gallery-item:nth-child(8) {
grid-column: 1/3;
grid-row: 6/8;
}

selector .gallery-item:nth-child(9) {
grid-column: 3/5;
grid-row: 6/8;
}

selector .gallery-item:nth-child(10) {
grid-column: 2/4;
grid-row: 7/9;
}

}

/* the hover animation */
@media (min-width: 1025px) {
selector .gallery-item {
animation: scaleOut forwards var(--hover-image-animation-duration) 1;
}

selector .gallery-item:hover {
animation: scaleIn forwards var(--hover-image-animation-duration) 1;
}

@keyframes scaleIn {
0% {
transform: scale(1);
z-index: 2;
}

100% {
transform: scale(var(--hover-image-scale));
z-index: 2;
}
}

@keyframes scaleOut {
0% {
transform: scale(var(--hover-image-scale));
z-index: 1;
}

99.9% {
transform: scale(1);
z-index: 1;
}

100% {
transform: scale(1);
z-index: initial;
}
}

}