body {
  width: 100%;
  height: 100%;
  padding: 1rem;
  font-family: sans-serif;
  color: #333;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #333;
}
.gallery-container{
    margin-top: 80px;
}
.gallery-container .heading{
    height: 60px;
    width: 100%;
    text-align: center;
    padding: 35px;
}
.gallery-container .heading h1{
    color: #0f305d;
    width: 100%;
}
.gallery-container .heading h1 span{
    color: #ab030c;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 1rem;
  grid-auto-rows: 300px;
  grid-auto-flow: dense;
  list-style-type: none;
  padding: 35px 10px;
  margin: 0 0 20px 0;
}


.gallery li figure {
  margin: 0;
  width: 100%;
  height: 100%;
  position: relative;
}

.wide {
  grid-column: span 2;
}

.tall {
  grid-row: span 2;
}

img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Hover effect specific styles */

/* Filter effect */

.gallery.filter img {
  transition: filter .3s ease-in-out;
  filter: grayscale(100%);
}

.gallery.filter img:hover {
  filter: none;
}

/* Zoom in-out effect */
.gallery.zoom li {
  overflow: hidden;
}

.gallery.zoom img {
  transform: scale(1);
  transition: transform .3s ease-in-out;
}

.gallery.zoom img:hover {
  transform: scale(1.2);
}



@media (max-width:480px){

.gallery {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: auto;
  margin: 0;
  width: 100%;
}
img {
  width: 100%;
  height: 300px;
  display: block;
  object-fit: cover;
}

}