.gallery { display: flex; flex-wrap: wrap; gap: 2rem; margin-bottom: 4rem; } .gallery-card { width: 320px; flex-grow: 1; } .gallery-card img { display: block; width: 100%; margin-bottom: 1rem; } .gallery-card a { color: black; text-decoration: underline; } .flip-box { background-color: transparent; width: 300px; height: 300px; border: 1px solid #f1f1f1; perspective: 1000px; /* Remove this if you don't want the 3D effect */ } .flip-box-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d; } .flip-box:hover .flip-box-inner { transform: rotateY(180deg); } .flip-box-front, .flip-box-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; /* Safari */ backface-visibility: hidden; } .flip-box-front { background-color: transparent; color: black; } .flip-box-back { background-color: white; color: black; transform: rotateY(180deg); }