.banner {
  width: 1218px;
  height: 142px;
  position: relative;
  overflow: hidden;
}

/* Cada <a> cubre todo el banner */
.banner a {
    position: absolute;
    inset: 0;              /* top:0; right:0; bottom:0; left:0 */
    display: block;
    opacity: 0;
    pointer-events: none;   /* por defecto NO clickeable */
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    left: 915px;
    top: 35px;
}

/* La imagen solo se adapta, sin posición absoluta */
.banner a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Asignamos animaciones a cada enlace */
.banner a:nth-child(1) { animation-name: show1; }
.banner a:nth-child(2) { animation-name: show2; }
.banner a:nth-child(3) { animation-name: show3; }

/* Misma lógica de tiempos que tu banner original */
@keyframes show1 {
  0%, 30%   { opacity: 1; pointer-events: auto; }
  31%, 34%  { opacity: 0.1; pointer-events: none; }
  35%, 100% { opacity: 0; pointer-events: none; }
}
@keyframes show2 {
  0%, 34%   { opacity: 0; pointer-events: none; }
  35%, 65%  { opacity: 1; pointer-events: auto; }
  66%, 69%  { opacity: 0.1; pointer-events: none; }
  70%, 100% { opacity: 0; pointer-events: none; }
}
@keyframes show3 {
  0%, 69%   { opacity: 0; pointer-events: none; }
  70%, 100% { opacity: 1; pointer-events: auto; }
}