How to make swiper slide take the entire Swiper width

[SakuraNoTamashi]

I'm trying to make my slides take up on the whole swiper, its not meant to show the prev and next slides, just one since its basically a Hero. enter image description here

This is my current code, you will notice i try to specify 1 slide per view:

'use client';
import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import './hero.css';
import TicketSearch from '../ticket-search/ticket-search';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay } from 'swiper/modules';
import 'swiper/css';
import { Button } from '@mui/material';
import ChatIcon from '@mui/icons-material/Chat';  // or ChatBubble

const heroSlides = [
   {
       alt: 'Cumpleaños infantil',
       mobileSrc: '/images/responsive-hero-img.png',
       desktopSrc: '/images/responsive-hero-img-pc.png',
   },
   {
       alt: 'Celebra tu cumpleaños',
       mobileSrc: '/images/celebrate-birthday-hero.png',
       desktopSrc: '/images/celebrate-birthday-hero.png',
   },
   {
       alt: 'Fiesta empresarial',
       mobileSrc: '/images/business-party-hero.png',
       desktopSrc: '/images/business-party-hero.png',
   },
];


function HeroSection({ desktopSrc, alt, layout }) {
   return (
       <div className="hero-wrapper">
           <img src={desktopSrc} alt={alt} className="hero-img" />
           <div className={layout}>
               <HeroButton text="Ver más" style={buttonStylesLightBlue} />
               <HeroButton text="Quiero CELEBRAR MI CUMPLEAÑOS" style={buttonStylesDarkBlue} />
           </div>
       </div>
   );
}

function HeroSlide({ mobileSrc, desktopSrc, alt, className }) {
   return (
       <picture>
           <source media="(min-width: 1024px)" srcSet={desktopSrc} />
           <img src={mobileSrc} alt={alt} className={className} />
       </picture>
   );
}

export default function Hero() {
   const [isDesktop, setIsDesktop] = useState(false);

   useEffect(() => {
       const checkIsDesktop = () => setIsDesktop(window.innerWidth >= 426);
       checkIsDesktop();
       window.addEventListener('resize', checkIsDesktop);
       return () => window.removeEventListener('resize', checkIsDesktop);
   }, []);

   return (
       <section className="hero-section">
           {isDesktop ? (
               <Swiper
                   autoplay={{ delay: 10000, disableOnInteraction: false }}
                   loop
                   freeMode={true}          
                   modules={[Autoplay]}
                   slidesPerView={1}
                   centeredSlides={false}
                   spaceBetween={0}
                   initialSlide={1} 
               >
                   <SwiperSlide>
                       <HeroSection {...heroSlides[1]} layout="button-group-birthday" />
                   
                   </SwiperSlide>
                   <SwiperSlide>
                       <HeroSection {...heroSlides[0]} layout="button-group-regular" />
                   </SwiperSlide>
                   <SwiperSlide>
                       <HeroSection {...heroSlides[2]} layout="button-group-vertical" />
                   </SwiperSlide>
               </Swiper>
           ) : (
               <HeroSlide {...heroSlides[0]} className="hero-img" />
           )}

       </section>
   );
}

This is the css:

.hero-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.hero-section {
    width: 100vw;
    height: 50vh;
    overflow: hidden;
}

/* Buttons over the image */
.button-group-regular{
    display: flex;
    gap: 20px;
    position: absolute;
    top: 72%;
    left: 7%;
   
    z-index: 10;


}
/* Buttons over the image */
.button-group-birthday{
    display: flex;
    gap: 20px;
    position: absolute;
    top: 70%;
    left: 15%;
    z-index: 10;


}
.button-group-vertical{
    display: flex;
    flex-direction: column-reverse;
    gap: 20px;
    position: absolute;
    top: 59%;
    left: 3%;
    z-index: 10;


}


.swiper {
    width: 100%;
    height: 100%;
  }
  
.swiper-slide {

    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Make sure each slide's internal <picture> element fills full space */
.swiper-slide picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* Ensure image fills its container */

/* Desktop: taller hero */
@media (min-width: 424px) {
    .hero-section {
        height: 52vh;
    }
    .hero-img{
        object-fit: fill;
    }
}
@media (min-width: 1023px) {
    .hero-section{
        height: 60vh;
    }


}
/* Desktop: taller hero */
@media (min-width: 1400px) {
/* Buttons over the image */
        .button-group-birthday{
            display: flex;
            gap: 20px;
            position: absolute;
            top: 70%;
            left: 35%;
            z-index: 10;


        }
}

you can find the complete website if you want to give it a look here