.records-area{
  display: flex;
  max-width: 1100px;
  margin: 20px auto 0;
  justify-content: center;
  column-gap: 30px;
}

.records-area img{
  width: 310px;
  height: auto;
}


@media screen and (max-width: 1050px) {
  .records-area {
    display: grid
    ;
        gap: 1rem;
        grid-template:
            "two two"
            "one three";
        justify-items: center;
        margin-inline: auto;
        width: fit-content;
  }
  .records-img1{ grid-area: one; }
  .records-img2 { grid-area: two; }
  .records-img3 { grid-area: three; }
  }

@media screen and (max-width: 480px) {
  .records-area{
    row-gap: 10px;
    column-gap: 5px;
    padding: 0 8px;
  }
  .records-area img{
    width: 280px;
  }
}