body {
  margin: 0;
  background: black;
  overflow: hidden;
  font-family: "Outfit", sans-serif;
}

img {
  width: 100%;
}

.bg {
  background-image: url("/assets/images/bg2.jpg");
  height: 100vh;
  background-size: cover;
}

svg {
  width: 1em;
  margin: 2em auto;
  display: block;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
          clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}

.grid-1 {
  display: -ms-grid;
  display: grid;
  place-content: center;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100vh;
  color: white;
  text-align: center;
}

.grid-1 .text-animation {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
          clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  -webkit-transition: 1.5s all;
  transition: 1.5s all;
  -webkit-transform: translateY(-2rem);
          transform: translateY(-2rem);
}

.grid-1 .text-animation h1 {
  font-size: 3rem;
}

.grid-1 .text-animation p {
  font-size: 1.3rem;
}

.grid-3 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
      grid-template-columns: repeat(3, 1fr);
  background: transparent;
  gap: 0.7em;
  bottom: 0;
  position: absolute;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
          clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  opacity: 0;
  -webkit-transform: translateY(2em);
          transform: translateY(2em);
  margin: 0 1rem;
  border-radius: 0.2rem;
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
          box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
}

.grid-3 .box {
  -webkit-box-shadow: 10px 10px 27px -12px rgba(0, 0, 0, 0.75);
          box-shadow: 10px 10px 27px -12px rgba(0, 0, 0, 0.75);
  cursor: pointer;
}

.grid-3 .box:hover {
  scale: 1.05;
  -webkit-transition: 0.5s ease-out all;
  transition: 0.5s ease-out all;
}

.grid-3 .img-box img {
  width: 100%;
  height: 13em;
  -o-object-fit: cover;
     object-fit: cover;
}

.grid-3 .text-box {
  background: #e8f3e8;
}

.grid-3 .text-box h2 {
  margin-bottom: 6rem;
  margin-top: -3.5rem;
  font-size: 1.7rem;
  font-weight: bold;
  text-shadow: 2px 0px 2px rgba(0, 0, 0, 0.6);
}

.grid-3 .text-box p {
  margin-top: -4.5rem;
  padding: 1rem 0.2rem 1.5rem 0.3rem;
  text-shadow: 2px 0px 2px rgba(0, 0, 0, 0.6);
}

@media (max-width: 768px) {
  body {
    overflow: auto;
  }
  .grid-1 h1 {
    font-size: 1.7rem;
  }
  .grid-3 {
    -ms-grid-columns: (1fr)[1];
        grid-template-columns: repeat(1, 1fr);
    top: 23em;
    bottom: unset;
  }
  .grid-3 .box h2 {
    font-size: 1.4rem;
  }
}