@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');


div.gallery {

display: flex;

align-items: flex-start;

flex-wrap: wrap;

justify-content: center;

align-items: center;

}


/* Updated Stage: Must have a fixed width or max-width for 3D perspective to align properly */

div.gallery-item {

margin: 5px;

border: 1px solid #ccc;

width: calc(25% - 10px); /* Adjust this width based on how large you want your cards */

height: auto;

perspective: 1000px;

cursor: pointer;

transition: border 0.3s;

}


div.gallery-item:hover {

border: 1px solid #777;

}


/* The card container that actually spins */

div.gallery-item .card-inner {

position: relative;

width: 100%;

height: 100%;

transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);

transform-style: preserve-3d;

}


/* When Javascript toggles the class, spin it 180 degrees */

div.gallery-item.flipped .card-inner {

transform: rotateY(180deg);

}


/* Front and Back Face settings */

div.card-front, div.card-back {

width: 100%;

height: 100%;

backface-visibility: hidden;

-webkit-backface-visibility: hidden;

}


/* Hide the back side by default by pre-rotating it */

div.card-back {

position: absolute;

display: flex;

top: 0;

left: 0;

background-color: #fff;

justify-content: center;

align-items: center;

transform: rotateY(180deg);

}


/* Kept your exact image and description styles */

div.gallery-item img {

width: 100%;

height: auto;

display: block;

}


div.gallery-item div.desc {

padding: 15px;

text-align: center;

font-family: "Instrument Serif", serif;

}