Different images for desktop and smartphone portrait

am besten wäre, wenn alle Bilder die gleichen Größen haben!

damit das Bild nicht die folgenden Einstellungen bei großen Screenweiten macht, wäre eine Anpassung des media-query nötig.
(Die Grenze hängt davon ab, wann das Bild beginnt auf die kleiner Screenweite zu reagieren – das hängt von den Bilddimensionen ab und dem min-height Wert)

(Das kann man aber auch gut empirisch herausfinden diese Grenze, indem man das Ganze zunächst testet mit einem negativen rechts wert ( right: -80px) und ohne das media-query einsetzt und den Screen solange zusammenschiebt, bis links keine Lücke mehr ist. Diese Breite überträgt man dann als media query Grenze.)

teste mal bitte:

@media only screen and (max-width:1405px) {
  #top .avia-fullwidth-slider .avia-slideshow li img {
    position: absolute;
    left: unset !important;
    top: 0 !important;
    right: -20px !important;
  }

  #top .avia-fullwidth-slider .avia-slideshow li {
  overflow: visible !important;
  height: inherit !important;
  }

  #top .avia-fullwidth-slider .avia-slide-wrap {
    width: 100% !important;
    height: 100% !important;
  }
}

die custom-class befände sich am avia-fullwidth-slider

solltest Du mehrere Bilder unterschiedlich positionieren müssen musst du für jede li gesondert die Positionen setzen li.slide-1; li.slide-2 etc. – also
zusätzlich :

#top .avia-fullwidth-slider .avia-slideshow li.slide-1 img {
    right: 0 !important;
}

#top .avia-fullwidth-slider .avia-slideshow li.slide-2 img {
    right: -50px !important;
}