/* D3 Logo Showcase — Frontend */

.d3lsp-wrap,
.d3lsp-wrap * { box-sizing: border-box; }

/* ── Shared item ──────────────────────────────────────────────── */
.d3lsp-item { display: block; }

.d3lsp-link { display: block; text-decoration: none; color: inherit; }

.d3lsp-img {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.d3lsp-img img {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    transition: opacity .2s, transform .2s;
}
.d3lsp-link:hover .d3lsp-img img {
    opacity: .8;
    transform: scale(1.04);
}
.d3lsp-title {
    display: block;
    text-align: center;
    font-size: 13px;
    margin-top: 6px;
    color: #555;
}

/* ── Grid ─────────────────────────────────────────────────────── */
.d3lsp-grid {
    display: grid;
    grid-template-columns: repeat( var(--d3lsp-cols, 4), 1fr );
    gap: var(--d3lsp-gap, 20px);
}

/* ── Masonry ──────────────────────────────────────────────────── */
.d3lsp-mitem {
    width: calc(
        (100% - ( var(--d3lsp-cols, 4) - 1 ) * var(--d3lsp-gap, 20px) )
        / var(--d3lsp-cols, 4)
    );
    margin-bottom: var(--d3lsp-gap, 20px);
}
.d3lsp-gutter { width: var(--d3lsp-gap, 20px); }

/* ── Carousel ─────────────────────────────────────────────────── */
.d3lsp-carousel .d3lsp-item { padding: 0 calc( var(--d3lsp-gap, 20px) / 2 ); }
.d3lsp-carousel .slick-dots  { bottom: -28px; }
.d3lsp-carousel .slick-prev  { left:  -22px; }
.d3lsp-carousel .slick-next  { right: -22px; }

/* ── Responsive ───────────────────────────────────────────────── */
@media ( max-width: 991px ) {
    .d3lsp-grid   { grid-template-columns: repeat( min( var(--d3lsp-cols,4), 3 ), 1fr ); }
    .d3lsp-mitem  { width: calc( (100% - 2 * var(--d3lsp-gap,20px)) / 3 ); }
}
@media ( max-width: 767px ) {
    .d3lsp-grid   { grid-template-columns: repeat( min( var(--d3lsp-cols,4), 2 ), 1fr ); }
    .d3lsp-mitem  { width: calc( (100% - var(--d3lsp-gap,20px)) / 2 ); }
}
@media ( max-width: 480px ) {
    .d3lsp-grid   { grid-template-columns: 1fr 1fr; }
    .d3lsp-mitem  { width: calc( 50% - var(--d3lsp-gap,20px) / 2 ); }
}