.grid-three-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}

.grid-three-cards .card-img-bg {
  width: 100%;
  height: 100%;
}

.grid-one-two {
  display: grid;
  grid-template-areas:
    "one two"
    "one three";
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
  transition: all 0.4s ease-in-out;
}

.one {
  grid-area: one;
  height: 800px;
  width: 100%;
  transition: all 0.4s ease-in-out;
}

.two {
  grid-area: two;
  width: 100%;
  transition: all 0.4s ease-in-out;
}

.three {
  grid-area: three;
  width: 100%;
  transition: all 0.4s ease-in-out;
}

.grid-one-two .card-img-bg-md,
.grid-short-long .card-img-bg-md {
  width: 100%;
  height: 100%;
}

.grid-short-long {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 32px;
  transition: all 0.4s ease-in-out;
}
.grid-short-long > * {
  width: 100%;
  height: 384px;
  transition: all 0.4s ease-in-out;
}

.grid-three-cards .card-title,
.grid-one-two .card-title,
.grid-short-long .card-title {
  font-size: 32px;
  line-height: 120%;
  letter-spacing: -1%;
  transition: all 0.4s ease-in-out;
}

@media (max-width: 1024px) {
  .grid-three-cards {
    gap: 16px;
    grid-template-columns: 1fr;
    margin-bottom: 16px;
  }
  .grid-short-long > *,
  .one,
  .two,
  .three {
    height: 100%;
  }
  .grid-one-two {
    display: grid;
    grid-template-areas:
      "one "
      " two"
      " three";
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
  }
  .grid-short-long {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .grid-three-cards .card-title,
  .grid-one-two .card-title,
  .grid-short-long .card-title {
    font-size: 24px;
  }
  .grid-three-cards .card-img-bg,
  .grid-one-two .card-img-bg-md,
  .grid-short-long .card-img-bg-md {
    aspect-ratio: 1 / 1;
  }
}