/* ==========================================================================
   PAGEBUILDER: images_logowall
   shared section styles (.pb-section, .pb-content, .pb-headline, .pb-columns) are in style.css.
   ========================================================================== */

/* live site: 60px below the logos, 100px between two stacked logowalls. */
.pb-images-logowall {
    padding-bottom: 60px;
}

.pb-images-logowall + .pb-images-logowall {
    padding-top: 40px;
}

.pb-images-logowall-logos {
    --logo-width: 200px;
    --logo-max-height: 80px;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 30px 20px;
    margin: 0;
    padding: 20px 10px;
    list-style: none;
}

.pb-images-logowall-logo {
    display: flex;
    flex: 0 1 var(--logo-width);
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.pb-images-logowall-logo a {
    display: block;
    width: 100%;
    transition: transform .3s, opacity .3s;
}

.pb-images-logowall-logo a:is(:hover, :focus-visible) {
    opacity: .9;
    transform: scale(1.05);
}

.pb-images-logowall-logo img {
    display: block;
    width: 100%;
    height: auto;
    max-height: var(--logo-max-height);
    object-fit: contain;
}

@media (max-width: 768px) {
    .pb-images-logowall-logos {
        --logo-width: 150px;
        --logo-max-height: 70px;

        gap: 20px 15px;
    }
}

@media (max-width: 480px) {
    .pb-images-logowall-logos {
        --logo-width: 120px;
        --logo-max-height: 60px;

        gap: 15px 10px;
        padding: 10px 5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pb-images-logowall-logo a {
        transition: none;
    }
}