*{
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
body{
    background-color: #363636;
}
h2 {
    font-family: Helvetica;
    text-align: center;
    font-size: 2rem;
    color: #5e17eb;
}
  
.gallery {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
  
.gallery-item {
    flex: 0 0 calc(33.333% - 10px);
}
  
.gallery-image {
    width: 100%;
    height: 300px;
    transition:  0.3s;
    object-fit: cover;
    cursor: pointer;
}
  
.gallery-image:hover {
transform: scale(1.1);
}

.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
z-index: 100;
}

.lightbox-content {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}

.lightbox-image {
max-width: 800px;
object-fit: cover;
}

.lightbox-close {
position: absolute;
top: 1rem;
right: 2rem;
font-size: 2rem;
color: #fff;
border: 1px solid #fff;
padding: 0.1rem 0.3rem;
text-decoration: none;
cursor: pointer;
transition: 0.5s;
}

.lightbox-close:hover {
background-color: #fff;
color: #000;
}

@media(max-width: 600px){
    .gallery{
        flex-direction: column;
    }
    .gallery-item{
        flex: 0 0 calc(90% - 10px);
    }
    .gallery-image{
        object-fit: contain;
    }
    .lightbox-image{
        max-width: 90%;
    }
    .lightbox-close{
        top: 2rem;
    }
}