.container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 150px 250px;
  grid-gap: 7px;
  grid-auto-flow: dense;
}

body {
  grid-template-rows: 70px auto 40px !important;
  grid-template-areas:
    "header header header"
    "section section section"
    "footer footer footer" !important;
}

section {
  margin: 0 1rem 0 1rem !important;
  padding: 10px !important;
}

.gallery-item {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.gallery-item .image {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 5px;
}

.gallery-item .image img .poopi {
  width: 80% !important;
  height: 80% !important;
}

.gallery-item .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  cursor: pointer;
  transition: 0.5s ease-in-out;
}

.gallery-item:hover .image img {
  transform: scale(1.15);
}

.gallery-item .text {
  overflow: hidden;
  opacity: 0;
  padding: 2rem;
  position: absolute;
  top: 60%;
  backdrop-filter: blur(5px);
  color: #fff;
  font-size: 25px;
  pointer-events: none;
  z-index: 4;
  transition: 0.3s ease-in-out;
}

.gallery-item:hover .text {
  opacity: 1;
  animation: infinite 0.3s linear;
  padding: 0.5em;
  width: 100%;
  overflow: hidden;
}

.w-1 {
  grid-column: span 1;
}

.w-2 {
  grid-column: span 2;
}

.w-3 {
  grid-column: span 3;
}

.w-4 {
  grid-column: span 4;
}

.w-5 {
  grid-column: span 5;
}

.w-6 {
  grid-column: span 6;
}

.h-1 {
  grid-row: span 1;
}

.h-2 {
  grid-row: span 2;
}

.h-3 {
  grid-row: span 3;
}

.h-4 {
  grid-row: span 4;
}

.h-5 {
  grid-row: span 5;
}

.h-6 {
  grid-row: span 6;
}

@media screen and (max-width: 500px) {
  .container {
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 5px;
  }

  .w-1,
  .w-2,
  .w-3,
  .w-4,
  .w-5,
  .w-6 {
    grid-column: span 1;
  }

  section {
    padding: 5px;
    border-radius: 7px;
  }

  @keyframes move-down {
    0% {
      top: 10%;
    }

    50% {
      top: 35%;
    }

    100% {
      top: 50%;
    }
  }
}