/**
 * about: ro-logos
 * Logo overview in tile layout. It allows to display a set of logos.
 * Optionally with name and detailPage
 * Tile layout based on parent width
 */

.ro-logos + .pbuic-pager-container {
    margin-top: 2em;
}

/**
 * Grid layout
 */

.ro-logos {
    --pbui-gridColumnWidths: min(256px, 12em);
    position: relative;
    display: grid;
    justify-content: space-between;
    gap: 2em;
    grid-template-columns: repeat(auto-fill, minmax(var(--pbui-gridColumnWidths), 1fr));
    width: 100%;
}

.ro-logos--sm {
    --pbui-gridColumnWidths: min(170px, 8em);
    row-gap: 3em;
}

/**
 * Item
 */

.ro-logos__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ro-logos__itemTitle {
    margin: .5rem 0 0 0 !important;
    font-size: var(--h4Size, 1.25rem);
}

/**
 * Image
 */

.ro-logos__imageWrapper {
    order: -1;
    padding: 5%;
    width: 100%;
    border-radius: var(--pbui-radius);
    box-shadow: 0 0 0 1px rgb(0 0 0 / 10%);
    background: #fff;
    overflow: clip;
}

.ro-logos__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
}

.ro-logos--oval .ro-logos__imageWrapper {
    padding: 16%;
    border-radius: 50%;
}

.ro-logos--portrait .ro-logos__img {
    aspect-ratio: 3/4;
}

.ro-logos--landscape .ro-logos__img {
    aspect-ratio: 4/3;
}

.ro-logos__detailPageLink {
    position: absolute;
    inset: 0;
}

.ro-logos__detailPageLinkText {
    position: absolute;
    left: -999em;
}

.ro-logos--centered {
    .ro-logos__item {
        align-items: center;
        text-align: center;
    }
}