/**
 * Image Grid Styles
 *
 * Styles for the image grid component.
 * Displays images in a flexible row-based grid layout.
 */

.image-grid {
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.image-grid__row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.image-grid__link,
.image-grid__item {
    display: inline-block;
    flex: 0 0 auto;
    transition: opacity 0.2s ease;
    text-decoration: none;
}

.image-grid__link:hover {
    opacity: 0.8;
}

.image-grid__image {
    max-width: 60px;
    height: auto;
    width: auto;
    display: block;
    object-fit: contain;
}

/* Tablet and up (481px+) */
@media (min-width: 481px) {
    .image-grid {
        gap: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .image-grid__row {
        gap: 0.75rem;
    }

    .image-grid__image {
        max-width: 80px;
    }
}

/* Desktop and up (769px+) */
@media (min-width: 769px) {
    .image-grid {
        max-width: 550px;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .image-grid__row {
        gap: 2rem;
    }

    .image-grid__image {
        max-width: 94px;
    }
}