div[id^="multi-cards-configuration"] img {
    width: 100%;
}

div[id^="multi-cards-configuration"] .tags {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 5px;
    margin-bottom: 20px;
}
div[id^="multi-cards-configuration"] .tags .tag {
    padding: 5px 10px;
    margin: 0;
    text-decoration: none;
}
div[id^="multi-cards-configuration"] .tags .tag-hidden {
    visibility: hidden;
}

.zoom-effect {
    transform: scale(1.05);
}

.carousel-inner.multi-cards > .active,
.carousel-inner.multi-cards > .next,
.carousel-inner.multi-cards > .prev {
    display: grid !important;
}
.carousel-inner.multi-cards .item {
    width: inherit;
    height: inherit;
    grid-template-columns: repeat(auto-fit, minmax(290px, 0px));
    justify-content: center;
    gap: 20px;
}

@media (min-width: 1200px) {
    .carousel-inner.multi-cards .item.item-length-1 {
        grid-template-columns: repeat(auto-fit, minmax(80%, 0px));
    }
    .carousel-inner.multi-cards .item.item-length-2 {
        grid-template-columns: repeat(auto-fit, minmax(42%, 0px));
    }
    .carousel-inner.multi-cards .item.item-length-3 {
        grid-template-columns: repeat(auto-fit, minmax(27%, 0px));
    }
    .carousel-inner.multi-cards .item.item-length-4 {
        grid-template-columns: repeat(auto-fit, minmax(21%, 0px));
    }
    .carousel-inner.multi-cards .item.item-length-5 {
        grid-template-columns: repeat(auto-fit, minmax(16%, 0px));
    }
}

@media (max-width: 1199px) {
    .carousel-inner.multi-cards .item.item-length-1 {
        grid-template-columns: repeat(auto-fit, minmax(80%, 0px));
    }
    .carousel-inner.multi-cards .item.item-length-2 {
        grid-template-columns: repeat(auto-fit, minmax(42%, 0px));
    }
    .carousel-inner.multi-cards .item.item-length-3 {
        grid-template-columns: repeat(auto-fit, minmax(27%, 0px));
    }
    .carousel-inner.multi-cards .item.item-length-4,
    .carousel-inner.multi-cards .item.item-length-5 {
        grid-template-columns: repeat(auto-fit, minmax(21%, 0px));
    }
}

@media (max-width: 991px) {
    .carousel-inner.multi-cards .item.item-length-1 {
        grid-template-columns: repeat(auto-fit, minmax(80%, 0px));
    }
    .carousel-inner.multi-cards .item.item-length-2,
    .carousel-inner.multi-cards .item.item-length-3 {
        grid-template-columns: repeat(auto-fit, minmax(42%, 0px));
    }
    .carousel-inner.multi-cards .item.item-length-4,
    .carousel-inner.multi-cards .item.item-length-5 {
        grid-template-columns: repeat(auto-fit, minmax(27%, 0px));
    }
}

@media (max-width: 767px) {
    .carousel-inner.multi-cards .item.item-length-1,
    .carousel-inner.multi-cards .item.item-length-2,
    .carousel-inner.multi-cards .item.item-length-3 {
        grid-template-columns: repeat(auto-fit, minmax(80%, 0px));
    }
    .carousel-inner.multi-cards .item.item-length-4,
    .carousel-inner.multi-cards .item.item-length-5 {
        grid-template-columns: repeat(auto-fit, minmax(42%, 0px));
    }
}

@media (max-width: 519px) {
    .carousel-inner.multi-cards .item.item-length-4,
    .carousel-inner.multi-cards .item.item-length-5 {
        grid-template-columns: repeat(auto-fit, minmax(80%, 0px));
    }
}

.gallery-carousel-multi-cards-card {
    width: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}
.gallery-carousel-multi-cards-card .media-wrapper {
    overflow: hidden;
}
.gallery-carousel-multi-cards-card .media-wrapper iframe {
    width: 100%;
    height: 100%;
}
.gallery-carousel-multi-cards-card .media-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gallery-carousel-multi-cards-card .card-body {
    padding: 1.25rem 1.25rem 4.5rem 1.25rem;
    overflow-wrap: break-word;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.gallery-carousel-multi-cards-card .card-body .card-title,
.gallery-carousel-multi-cards-card .card-body .card-text {
    margin-bottom: 10px;
}
.gallery-carousel-multi-cards-card .card-body .btn {
    box-shadow: none;
    margin-top: auto;
    position: relative;
    bottom: 0;
}

div[id^="multi-cards-configuration"].carousel .carousel-indicators {
    position: relative;
    bottom: 0;
    left: 50%;
    z-index: 15;
    width: 60%;
    padding-left: 0;
    margin-left: -30%;
    text-align: center;
    list-style: none;
}
div[id^="multi-cards-configuration"].carousel .carousel-indicators button {
    opacity: .5 ;
    box-sizing: content-box !important;
    flex: 0 1 auto !important;
    width: 30px !important;
    height: 3px !important;
    padding: 0 !important;
    margin-right: 3px !important;
    margin-left: 3px !important;
    text-indent: -999px !important;
    cursor: pointer !important;
    background-clip: padding-box !important;
    border: 0 !important;
    border-top: 10px solid transparent !important;
    border-bottom: 10px solid transparent !important;
    transition: opacity .6s ease !important;
}

div[id^="multi-cards-configuration"].carousel .carousel-indicators .active {
    opacity: 1 !important;
}

div[id^="multi-cards-configuration"].carousel .carousel-inner .carousel-control {
    background-image: none;
    opacity: 1;
    width: 5%;
}
div[id^="multi-cards-configuration"].carousel .carousel-inner .carousel-control a span {
    border-radius: 100%;
}

div[id^="multi-cards-configuration"] .carousel-control {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    font-size: 20px;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    opacity: 1 !important;
    background-image: none;
    width: 5%;
}
div[id^="multi-cards-configuration"] .carousel-control:hover {
    opacity: 1 !important;
}
div[id^="multi-cards-configuration"] .carousel-control.right {
    cursor: default;
    right: 20px;
    left: auto;
    background-image: none;
    opacity: 1;
    width: 5%;
}
div[id^="multi-cards-configuration"] .carousel-control.left {
    cursor: default;
    background-image: none;
    opacity: 1;
    width: 5%;
}
div[id^="multi-cards-configuration"] .carousel-control .glyphicon-menu-left,
div[id^="multi-cards-configuration"] .carousel-control .glyphicon-menu-right {
    color: inherit;
    position: absolute;
    top: 50%;
    z-index: 5;
    display: inline-block;
    margin-top: -10px;
    cursor: pointer;
}
div[id^="multi-cards-configuration"] .carousel-control .glyphicon-menu-right:hover,
div[id^="multi-cards-configuration"] .carousel-control .glyphicon-menu-right:focus {
    opacity: 0.5 !important;
}
div[id^="multi-cards-configuration"] .carousel-control .glyphicon-menu-left {
    left: 50%;
    margin-left: -10px;
}
div[id^="multi-cards-configuration"] .carousel-control.glyphicon-menu-right {
    right: 50%;
    margin-right: -10px;
}