Product card component using CSS flexbox

You may try something like this instead of absolute positioning

body {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }
    main {
      position: static; /* removes position absolute*/
      transform: none;  /* removes transform*/
    }
    footer {
      position: static; /* removes position absolute*/
      margin: 0 !important; /* or remove class centered */
      justify-self: end;
    }

P.S. main will be centered in the free space above footer, so you will need some additional styling, for example margin to center it relative to screen height

And as for me, it would be better to start showing desktop view from min-width a little bit bigger then component width, not from exactly 1440px