.cloud-collection-carousel {
    /* All Media Sizes */
    width: 100%;
    flex: 1;
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    /* Mobile Only */
    margin: 2rem 0 2rem 0;
}

.cloud-collection-carousel::-webkit-scrollbar {
    /* All Media Sizes */
    display: none;
}

.cloud-collection-carousel>.cloud-collection-carousel-img-container {
    /* All Media Sizes */
    scroll-snap-align: center;
}

.cloud-collection-carousel-img-container:first-child {
    /* Mobile Only */
    margin-left: calc(50% - 3rem);
}

/* margin-right has bugs on mac and iOS devices where it isn't respected. */
.cloud-collection-carousel-last-item-margin-right {
    /* Mobile Only */
    min-width: calc(50% - 3rem);
    max-width: calc(50% - 3rem);
}

.cloud-collection-carousel-img-container {
    /* All Media Sizes */
    max-height: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0.5rem 0 0.5rem;

    /* Mobile Only */
    max-width: 60%;
    min-width: 60%;
}

.cloud-collection-carousel-img-container img {
    /* Mobile Only */
    max-height: 100%;
    max-width: 100%;
}

/* Styles for Tablets & Small Laptop Screens */
@media screen and (min-width: 768px) {
    .cloud-collection-carousel {
        margin: 3rem 0 3rem 0;
    }

    .cloud-collection-carousel-img-container:first-child {
        margin-left: calc(50% - 5rem);
    }

    /* margin-right has bugs on mac and iOS devices where it isn't respected. */
    .cloud-collection-carousel-last-item-margin-right {
        min-width: calc(50% - 5rem);
        max-width: calc(50% - 5rem);
    }

    .cloud-collection-carousel-img-container {
        max-width: 45%;
        min-width: 45%;
    }
}

/* Styles for Larger Desktop Screens */
@media screen and (min-width: 1200px) {
    .cloud-collection-carousel {
        margin: 4rem 0 4rem 0;
    }

    .cloud-collection-carousel-img-container {
        max-width: 30%;
        min-width: 30%;
    }
}