.letsTalk {
  grid-column: span 3;

  border: 0.1rem solid #0000000a;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04)),
    linear-gradient(0deg, #f8f7f9, #f8f7f9);
  box-shadow: 0px 0.4rem 0.8rem 0px #0000000a;
  border-radius: 3.2rem;
  position: relative;

  height: 14.4rem;
}

.letsTalk > .text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  display: grid;
  grid-template-rows: 3.2rem auto;

  will-change: grid-template-rows;
  transition: grid-template-rows 0.3s ease-in-out;
}

.letsTalk:hover > .text {
  grid-template-rows: 0rem auto;
}

.letsTalk > .text > p {
  font-family: "Lufga", sans-serif;
  font-size: 2.4rem;
  line-height: 130%;
  letter-spacing: -0.015em;
  white-space: nowrap;
  color: #7d7d8a;
  height: 100%;
  overflow: hidden;

  will-change: opacity;
  transition: opacity 0.3s ease-in-out;
}

.letsTalk:hover > .text > p {
  opacity: 0;
}

.letsTalk > .text > h6 {
  font-family: "Lufga", sans-serif;
  font-size: 3.2rem;
  line-height: 130%;
  letter-spacing: -0.015em;
  white-space: nowrap;
  font-weight: 600;
  color: #292d32;

  will-change: opacity;
  transition: opacity 0.3s ease-in-out;
}

.letsTalk:hover > .text > h6 {
  opacity: 0.5;
}

.letsTalk > img.plane {
  transform-origin: center center;
  filter: drop-shadow(rgba(15, 15, 18, 0.25) 0px 20px 17px);
  transform: rotate(-15deg);

  pointer-events: none;

  position: absolute;
  left: -29.2rem;
  bottom: -12.3rem;
  width: 31.2rem;

  opacity: 0;

  z-index: 21;

  will-change: transform, left, bottom, opacity;
  transition: transform 0.3s ease-in-out, left 0.3s ease-in-out,
    bottom 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.letsTalk:hover > img.plane {
  transform: rotate(0deg);
  left: -9.5rem;
  bottom: -4rem;
  opacity: 1;
}

@media screen and (max-width: 1200px) {
  .letsTalk > .text,
  .letsTalk:hover > .text {
    grid-template-rows: auto auto;
  }

  .letsTalk > .text > p {
    will-change: unset;
    transition: unset;
    font-size: 1.6rem;
  }

  .letsTalk:hover > .text > p {
    opacity: unset;
  }

  .letsTalk > .text > h6 {
    font-size: 2.6rem;

    will-change: unset;
    transition: unset;
  }

  .letsTalk:hover > .text > h6 {
    opacity: unset;
  }

  .letsTalk > img.plane {
    transform: none;
    left: unset;
    bottom: unset;
    right: -1.1rem;
    top: -6.4rem;
    width: 13.5rem;
    opacity: 1;

    will-change: none;
    transition: none;
  }

  .letsTalk:hover > img.plane {
    transform: none;
    left: unset;
    bottom: unset;
    right: 0.9rem;
    top: -4.4rem;
    width: 15.5rem;
    opacity: 1;
  }
}