#slideshow {
    
    & .content {
        transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
        opacity: 0;
        transform: translateX(-20px);

        & .slideshow__wrapper {

            position: relative;
            width: 100%;
            aspect-ratio: 1 / 1;
            overflow: hidden; 
            border-radius: 10px;
            box-shadow: 
            inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.2),
            0 1px 1px hsl(0deg 0% 0% / 0.075),
            0 2px 2px hsl(0deg 0% 0% / 0.075),
            0 4px 4px hsl(0deg 0% 0% / 0.075),
            0 8px 8px hsl(0deg 0% 0% / 0.075),
            0 16px 16px hsl(0deg 0% 0% / 0.075);
        
            & .slideshow {

                display: flex;
                position: relative;
        
                & .slide {
                    aspect-ratio: 1 / 1;
                    object-fit: cover;
                }
            }

            :is(.slideshow-prev,.slideshow-next) {
                position: absolute;
                bottom: -32px;
                transform: translateY(-50%);
                display: grid;
                place-content: center;
                width: 64px;
                height: 64px;
                background-color: transparent;
                border: none;
                z-index: 1;
                transition: background-color .3s ease-in-out, opacity .3s ease-in-out;
            }
            
            :is(.slideshow-prev,.slideshow-next):hover {
                cursor: pointer;
                background-color: transparent;
            }
            
            :is(.slideshow-prev,.slideshow-next) svg {
                fill: #fff;
                width: 24px;
                height: 24px;
                transition: all .3s ease-in-out;
            }
            
            :is(.slideshow-prev,.slideshow-next):hover svg {
                width: 32px;
                height: 32px;
            }
            
            .slideshow-prev {
                left: 0;
            }
            
            .slideshow-next {
                right: 0;
            }

            & .slideshow-buttons-wrapper{
                position:absolute; 
                bottom:22px; 
                transform:translateX(-50%); 
                left:50%;
                z-index: 2;
                
                & .slideshow-buttons{
                    padding:4px; 
                    background-color:transparent; 
                    display:flex; 
                    gap:20px; 
                    margin:0; 
                    list-style:none; 
                    border-radius:9px;
                    
                    & .slideshow-button {
                        width:10px; 
                        height:10px; 
                        border-radius:50%; 
                        background-color:#fff;
                        cursor:pointer;
                    }
    
                    & .slideshow-button.active{
                        background-color: #FAC033;
                    }
                }
            }
        }   
    }

    & .content.animate-in {
        opacity: 1;
        transform: translateX(0);
    }
}