.gallery3-container {
    background-color: white;
    padding: 40px !important;
    overflow-x: hidden;
}

.gallery3-grid-sizer,
.gallery3-grid-item {
    width: calc(25% - 30px);
}

.gallery3-grid-item {
    float: left;
    margin-bottom: 40px;
}

.gallery3-grid-item img {
    display: block;
    max-width: 100%;
}

.gallery3-gutter-sizer {
    width: 40px;
}

.gallery3-container .carousel-inner img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.gallery3.carousel {
    display: none;
}

@media (max-width: 768px) {
    .gallery3.carousel {
        display: block;
    }

    .gallery3.grid {
        display: none;
    }

    .gallery3-container {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .gallery3.carousel .carousel-inner {
        width: 175%;
    }

    .gallery3.carousel img {
        float: left;
        position: relative;
        width: 50%;
    }

    .gallery3.carousel .carousel-item-next:not(.carousel-item-left),
    .gallery3.carousel .carousel-item-right.active {
        -webkit-transform: translate3d(50%, 0, 0);
        transform: translate3d(50%, 0, 0);
    }

    .gallery3.carousel .carousel-item-prev:not(.carousel-item-right),
    .gallery3.carousel .carousel-item-left.active {
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
    }

    /* Override the carousel transformations if there is only one slide (can't show preview of next slide) */
    .gallery3.carousel.one-image .carousel-item-next:not(.carousel-item-left),
    .gallery3.carousel.one-image .carousel-item-right.active {
        -webkit-transform: translate3d(100%, 0, 0) !important;
        transform: translate3d(100%, 0, 0) !important;
    }

    .gallery3.carousel.one-image .carousel-item-prev:not(.carousel-item-right),
    .gallery3.carousel.one-image .carousel-item-left.active {
        -webkit-transform: translate3d(-100%, 0, 0) !important;
        transform: translate3d(-100%, 0, 0) !important;
    }

    .gallery3.carousel.one-image .carousel-inner {
        width: 100% !important;
    }

    .gallery3.carousel.one-image img {
        float: none !important;
        position: static !important;
        width: 100% !important;
    }

    .gallery3.carousel.one-image .carousel-control-next, .gallery3.carousel.one-image .carousel-control-prev {
        display: none !important;
    }
}