[class*="wd-columns-"] {
    --wd-col: 1
}

[class*="wd-columns-"]>div {
    flex: 0 0 calc(100% / var(--wd-col));
    max-width: calc(100% / var(--wd-col));
    width: calc(100% / var(--wd-col))
}

.testimonials-slider :is(.owl-stage-outer, .wd-owl:not(.owl-loaded)) {
    padding-block: 5px
}

.testimonial-avatar {
    display: inline-block
}

.testimonial-avatar img {
    min-width: 60px;
    max-width: 100px;
    border-radius: 50%
}

.testimonial-rating {
    display: none;
    margin-bottom: 10px
}

.testimonial-content footer {
    margin-top: 15px;
    color: var(--color-gray-900);
    font-weight: 600
}

.testimonial-content footer>span {
    color: var(--color-gray-500);
    font-weight: 400
}

.testimonial-content footer>span:before {
    content: " - "
}

.testimon-with-rating .testimonial-rating {
    display: block
}

.testimon-align-center .testimonial {
    text-align: center
}

.testimon-align-center .testimonial-avatar {
    margin-bottom: 15px
}

:is(.testimon-align-left, .testimon-align-right) .testimonial-inner {
    display: flex;
    align-items: flex-start
}

:is(.testimon-align-left, .testimon-align-right) .testimonial-avatar {
    flex: 0 0 auto
}

:is(.testimon-align-left, .testimon-align-right) .testimonial-content {
    flex: 1 1 auto
}

.testimon-align-left .testimonial {
    text-align: left
}

.testimon-align-left .testimonial-inner {
    flex-direction: row
}

.testimon-align-left .testimonial-avatar {
    margin-right: 20px
}

.testimon-align-right .testimonial {
    text-align: right
}

.testimon-align-right .testimonial-inner {
    flex-direction: row-reverse
}

.testimon-align-right .testimonial-avatar {
    margin-left: 20px
}

.testimon-style-boxed .testimonial-inner {
    padding: 30px;
    border-radius: var(--wd-brd-radius);
    background-color: var(--bgcolor-white);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    transition: box-shadow .5s ease
}

.testimon-style-boxed .testimonial:hover .testimonial-inner {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15)
}

@media (min-width: 1025px) {
    .wd-columns-2 {
        --wd-col: 2
    }
    .wd-columns-3 {
        --wd-col: 3
    }
    .wd-columns-4 {
        --wd-col: 4
    }
    .wd-columns-5 {
        --wd-col: 5
    }
    .wd-columns-6 {
        --wd-col: 6
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    [class*="wd-columns-"]:not(.wd-columns-1) {
        --wd-col: 2
    }
}