//
// Variables
// --------------------------------------------------
$gallery-gap: .5rem !default;

//
// CSS Variables
// --------------------------------------------------
:root {
    --gallery-gap: #{$gallery-gap};
    --gallery-columns: 1;
}

//
// Gallery
// --------------------------------------------------
.gallery-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gallery-gap);
    + .gallery-row,
    + nav {
        margin-top: $spacer;
    }
}
.gallery-item {
    width: calc((100% / var(--gallery-columns)) - (var(--gallery-gap) * (var(--gallery-columns) - 1)) / var(--gallery-columns));
    img,
    picture {
        width: 100%;
        height: auto;
    }
    figure {
        margin-bottom: 0;
    }
}

//
// Gallery Item Sizes
// --------------------------------------------------
.gallery-item-size-1 {
    --gallery-columns: 1;
}
.gallery-item-size-2 {
    --gallery-columns: 2;
}
.gallery-item-size-3 {
    --gallery-columns: 3;
}
.gallery-item-size-4 {
    --gallery-columns: 2;
    @include media-breakpoint-up('sm') {
        --gallery-columns: 4;
    }
}
.gallery-item-size-5 {
    --gallery-columns: 2;
    @include media-breakpoint-up('sm') {
        --gallery-columns: 3;
    }
    @include media-breakpoint-up('md') {
        --gallery-columns: 5;
    }
}
.gallery-item-size-6 {
    --gallery-columns: 2;
    @include media-breakpoint-up('sm') {
        --gallery-columns: 3;
    }
    @include media-breakpoint-up('md') {
        --gallery-columns: 6;
    }
}