/* ============================================================================
   06-COMPONENTS -> #GALLERY
   ========================================================================= */

/**
 * A form field that allows the selection of multiple images from the media
 * manager.
 */


//
// SCSS imports
//

@use '../01-settings' as *;
@use '../02-tools' as *;


/**
 * Gallery
 */

.gallery {
    --gallery-border-color: var(--form-input-border-color);
    --gallery-border-radius: var(--form-input-border-radius);
    --gallery-border-width: var(--form-input-border-width);
    --gallery-padding-x: var(--card-padding-x);
    --gallery-padding-y: var(--card-padding-y);

    border: var(--gallery-border-width) solid var(--gallery-border-color);
    border-radius: var(--gallery-border-radius);
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
    padding: var(--gallery-padding-y) var(--gallery-padding-x);
    width: 100%;

    @include media-breakpoint-up('md') {
        grid-template-columns: repeat(3, 1fr);
    }
    
    @include media-breakpoint-up('lg') {
        grid-template-columns: repeat(2, 1fr);
    }
    
    @include media-breakpoint-up('xl') {
        grid-template-columns: repeat(4, 1fr);
    }
}