CSS-only image slider not working on Safari

Question

I've made this image slider using CSS only, code attached for your reference. However, the images of the slider are stretching themselves too long and are overflowing towards right on Safari. I've read other answers here on Stack Overflow, however, none of the solutions solved the problem.

Here is the link to the website, in case you wish to see the problem first-hand. https://www.carrelinarctic.com/

Looking forward to your kind help.

Thanks for your time.

#Slider-Wrapper
{
    position: relative;
    max-width: 64rem;
    margin: 0 auto;
}

#Slider
{
    display: flex;
    aspect-ratio: 2405.2/1570.2;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    box-shadow: 0 1.5rem 3rem -0.75 re, hsla(0, 0%, 0%, 0.25);
    border: 0.5rem;
}

#Slider img
{
    flex: 1 0 100%;
    scroll-snap-align: start;
}

#Slider-Nav
{
    display: flex;
    column-gap: 1rem;
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

#Slider-Nav a
{
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0.75;
    transition: opacity ease 250ms;
}

#Slider-Nav a:hover
{
    opacity: 1;
}

<div id="Slider-Wrapper">
            <div id="Slider">
                <img src="img/HomePage.webp" alt="" id="slide1">
                <img src="img/InsertPage.webp" alt="" id="slide2">
                <img src="img/LayoutPage.webp" alt="" id="slide3">
            </div>

            <div id="Slider-Nav">
                <a href="#slide1"></a>
                <a href="#slide2"></a>
                <a href="#slide3"></a>
            </div>
        </div>

Answer 1

You need to specify the width of your images:

#Slider img {
    ...
    width: 100%;
}