.the-pics {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 0;
  text-align: center;
}

.the-pics hr {
  width: 100px;
  border: 1px solid #fec465;
  margin: 35px 0;
}

.container {
  width: 80%;
  margin: 0 auto;
  display: grid;
  grid-auto-flow: dense;
  grid-template:
    "1fr 1fr 1fr 1fr 1fr" 33.33vh
    "1fr 1fr 1fr 1fr 1fr" 33.33vh
    "1fr 1fr 1fr 1fr 1fr" 33.33vh
    "1fr 1fr 1fr 1fr 1fr" 33.33vh
    "1fr 1fr 1fr 1fr 1fr" 33.33vh
    "1fr 1fr 1fr 1fr 1fr" 33.33vh;
  grid-gap: 20px;
}

.container .box {
  position: relative;
  overflow: hidden;
  background-color: #000000;
  border-radius: 7px;
}

.container .box img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity: 1;
  overflow: hidden;
  transition: transform 0.5s, opacity 0.5s;
}

.container .box img:hover {
  opacity: 0.5;
  transform: scale(1.15);
}

.container .box.a {
  grid-row: span 2;
}

.container .box.b,
.container .box.f,
.container .box.h,
.container .box.j {
  grid-column: span 2;
}

@media (max-width: 991px) {
  .container {
    grid-template:
      "1fr 1fr 1fr" 250px
      "1fr 1fr 1fr" 250px
      "1fr 1fr 1fr" 250px
      "1fr 1fr 1fr" 250px
      "1fr 1fr 1fr" 250px
      "1fr 1fr 1fr" 250px
      "1fr 1fr 1fr" 250px;
  }
}

@media (max-width: 768px) {
  .container {
    width: 90%;
    grid-template:
      "1fr 1fr" 200px
      "1fr 1fr" 200px
      "1fr 1fr" 200px
      "1fr 1fr" 200px
      "1fr 1fr" 200px
      "1fr 1fr" 200px
      "1fr 1fr" 200px
      "1fr 1fr" 200px
      "1fr 1fr" 200px
      "1fr 1fr" 200px
      "1fr 1fr" 200px
      "1fr 1fr" 200px
      "1fr 1fr" 200px
      "1fr 1fr" 200px;
  }

  .container .box.h {
    grid-column: span 1;
  }
}


/* //CSS FOR THE MODAL// */

/* @import url('https://fonts.googleapis.com/css?family=Montserrat');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Montserrat', sans-serif;
  background-color: #eee;
  color: #111;
  height: 200vh;
}
button {
  margin: 0.75rem;
  padding: 0.25rem;
  cursor: pointer;
} */

/* Modal */
.modal {
  position: fixed; 
  left: 0;
  top: 0;
  width: 100% !important;
  height: 100vh !important;
  
  display: none;
  justify-content: center;
  align-items: flex-start; /* or center */
  z-index: 1000; /* depending on what z-index values exist in your page, in order for the modal layer to sit on top of other content */
  overflow: auto; /* enable scrolling if needed - although this is not really necessary since we are going take care of overflow in modal-content */
  background-color: rgba(0,0,0,0.7);
}
.modal.modal-show {
  animation: fadeIn 0.1s ease-in-out forwards;
}
.modal.modal-hide {
  animation: fadeOut 0.1s ease-in-out 0.1s forwards;
}
.modal-content {
  position: relative;
  /* background-color: #fff; */
  /* margin: 1rem; */
  /* padding: 2rem; */
  border-radius: 0.25rem;
  margin-top: 15px;
  /* margin-bottom: 20px; */
  /* width: 100% !important; */
  /* height: 70vh !important; */
  /* width: 50%; */
  /* max-height: 75%; */
  overflow: auto;
  /* box-shadow: 0 4px 20px rgba(0,0,0,0.4); */
}
.modal.modal-show .modal-content {
  animation: fadeInDown 0.3s ease-in-out forwards;
}
.modal.modal-hide .modal-content {
  animation: fadeOutUp 0.2s ease-in-out forwards;
}
.modal-content h1 {
  text-align: center;
  margin-bottom: 2rem;
}

.modal-content img {
  height: 97vh !important;
}
.modal-content p {
  margin: 1rem 0;
  line-height: 1.5rem;
}
.modal-close {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 1.75rem;
  font-weight: bold;
  padding: 0 0.75rem;
  /* width: 2rem;
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center; */
  color: rgba(0,0,0,0.2);
  cursor: pointer;
  user-select: none;
}
.modal-close:hover, .modal-close:focus {
  color: rgba(0,0,0,0.5);
}

/* Animations */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-3rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0); 
  }
}
@keyframes fadeOutUp {
  0% { 
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-3rem);
  }
}

@media(max-width: 992px) {
  html { font-size: 14px; }
  .modal-content { width: 80%; }
}
@media(max-width:767px) {
  html { font-size: 12px; }
  .modal-content { padding: 2rem 1rem 1rem 1rem; width: 90%; }
  .modal-content h1 { margin-bottom: 1.5rem; }
}