| /* Gallery.css */ | |
| /* Styling for the gallery container */ | |
| .gallery-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(20%, 1fr)); /* 5 images in a row */ | |
| grid-gap: 10px; /* Adjust the gap between images as needed */ | |
| } | |
| /* Styling for individual gallery images */ | |
| .gallery-image { | |
| width: 100%; | |
| max-height: 100%; /* Ensure images maintain aspect ratio */ | |
| object-fit: cover; /* Resize images to cover the container */ | |
| cursor: pointer; | |
| /* Add any other image styling you want here */ | |
| } | |
| /* Styling for the modal */ | |
| .modal { | |
| display: block; | |
| position: fixed; | |
| z-index: 1; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent background */ | |
| overflow: auto; | |
| } | |
| /* Styling for the close button */ | |
| .close-button { | |
| position: absolute; | |
| top: 15px; | |
| right: 15px; | |
| font-size: 30px; | |
| color: white; | |
| cursor: pointer; | |
| } | |
| /* Styling for the full-size image in the modal */ | |
| .modal img { | |
| display: block; | |
| margin: 0 auto; | |
| max-width: 100%; | |
| max-height: 100%; | |
| padding: 20px; | |
| } | |