.arrow-text .arrow-text-container {
  display: grid;
  grid-template-columns: 3fr 4fr;
  gap: 3em;
  gap: clamp(1em, 5vw, 3em);
}
.arrow-text .arrow-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: baseline;
  margin-right: 3em;
}
.arrow-text .arrow {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.arrow-text .arrow .img-container {
  width: 11.17em;
  width: clamp(3.66em, 13vw, 11.17em);
  aspect-ratio: 0.87/1;
}
.arrow-text .dots {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  transform: translate(-10%, -45%);
}
.arrow-text .dots .img-container {
  width: 15.88em;
  width: clamp(4.83em, 20vw, 15.88em);
  aspect-ratio: 1;
}

@media (max-width: 1300px) {
  .arrow-text .arrow-text-container {
    grid-template-areas: "arrow" "arrow";
    grid-template-columns: 7fr 3fr;
    gap: 0;
  }
  .arrow-text .arrow-container {
    grid-area: arrow;
    justify-content: flex-start;
    margin-right: -1em;
  }
  .arrow-text .style-h3 {
    grid-area: text;
    margin-bottom: 0;
    padding-right: 1em;
  }
  .arrow-text .dots {
    transform: translate(-15%, -30%);
    padding-left: 1em;
  }
}