.outer-slideshow {
    width: 100vw;
    height: 100vh;
    .s_container {
        position: relative;
        .carousel {
            .flickity-viewport {
                .carousel-cell {
                    width: 100%;
                    height: 100vh;
                    position: relative;
                    overflow: hidden;
                    &.is-selected {
                        img {
                            animation: zoomIn 4s ease-in-out;
                        }
                    }
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        
                    }
                    &::after {
                        content: "";
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background: rgba(0, 0, 0, .6);
                    }
                    .carousel-content {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        padding: 0 2rem;
                        .content-inner {
                            max-width: 1440px;
                            width: 100%;
                            margin: 0 auto;
                            z-index: 1;
                            height: 60%;
                            display: flex;
                            flex-direction: column;
                            justify-content: end;
                            position: relative;
                            h2 {
                                color: var(--white);
                                margin-bottom: 1rem;
                                text-transform: uppercase;
                                font-size: 25px;
                            }
                            p {
                                color: var(--white);
                                font-size: 16px;
                                line-height: 1.4;
                            }
                            .button {
                                &:hover {
                                    background-color: var(--secondary);
                                    color: var(--white);
                                    &::after {
                                        filter: unset;
                                    }
                                }
                            }
                            .scrollDown {
                                display: none;
                                position: absolute;
                                width: 50px;
                                height: 50px;
                                cursor: pointer;
                                bottom: 0rem;
                                right: 0rem;
                                img {
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                        }
                    }
                }
            }
            .flickity-prev-next-button {
                background-color: transparent!important;
                svg {
                    display: none;
                }
            }
            .flickity-page-dots {
                max-width: var(--max-width);
                right: 0;
                text-align: center;
                margin: 0 auto;
                left: 0;
                z-index: 10;
                bottom: 3%;
            }
        }
    }
}



@keyframes zoomIn {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.1);
    opacity: 1;
  }
}







@media (min-width: 1200px) {
    .outer-slideshow {
        height: 100vh;
        margin-bottom: 0;
        .s_container {
            .carousel {
                .flickity-viewport {
                    .carousel-cell {
                        height: 100vh;
                        .carousel-content { 
                            .content-inner {
                                height: 90%;
                                h2 {
                                    font-size: 56px;
                                    max-width: 48px;
                                }
                                p {
                                    max-width: 45%;
                                }
                                .scrollDown {
                                    display: block;
                                }
                            }
                        }
                    }
                }
                .flickity-prev-next-button {
                    top: 50%;
                }
                .flickity-page-dots {
                    text-align: center;
                    bottom: 2rem;
                }
            }
        }
    }
}