.services-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 100%;
  gap: 0.5em;
  opacity: 0;
  transition: all 1s ease-in-out;
  margin-top: 5em;
  height: 85vh;
}
.services-items-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.5em;
}

.service {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid black;
  background-size: 200%;
  background-position: center;
  justify-content: flex-end;
  cursor: pointer;
  transition: all 0.5s;
}
.service:hover {
  background-size: 250%;
  transition: all 0.5s;
}
.service-item-large {
  flex: 2;
}

.service-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 30.41%, #000 100%);
}
.service-title {
  z-index: 3;
}
.hide-desktop {
  display: none;
}

/* media for mobile devices */
@media only screen and (max-width: 767px) {
  .hide-desktop {
    display: block;
  }
  .services-container {
    display: none;
  }
}

/* media query for for ipads and tablets */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .services-container {
    display: none;
  }
  .hide-desktop {
    display: block;
  }
}