@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap');

body {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
}

.story-carousel {
    &__slide {
        height: 200px;
        font-size: 18px;
        color: #fff;
    }

    &--colors {
        .story-carousel__slide {
            &:nth-child(n+1) {
                background: #2e5c8a;
            }

            &:nth-child(2n+1) {
                background: #336699;
            }
        }
    }

    &--multiple {
        .story-carousel__slide {
            flex: 0 0 100%;

            @media (min-width: 500px) {
                flex: 0 0 50%;
            }

            @media (min-width: 768px) {
                flex: 0 0 33.33%;
            }

            @media (min-width: 1024px) {
                flex: 0 0 25%;
            }

            @media (min-width: 1280px) and (max-width: 1440px) {
                flex: 0 0 20%;
            }
        }
    }

    &--images {
        .story-carousel__slide {
            img {
                height: 200px;
                width: auto;
            }
        }
    }
}