// ============================================================================
// Mixins
// ============================================================================

@mixin gallery {
    display: grid;
    overflow: unset !important;

    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1.875rem; // px2rem(30px) - hardcoded until dependency resolved

    @media (max-width: 576px) {
        grid-template-columns: 1fr;
    }

    &__item {
        overflow: unset !important;
    }
}

@mixin gallery_image {
    // @include reset_bleed;
    // @include ratio_1x1; // TODO: dependency not available
    // @include image_cover;
    // border: q(1) solid black;

    // border: q(1);
    // border-color: black;
    aspect-ratio: 1 / 1; // Fallback for ratio_1x1
}

@mixin gallery_border {
    border: 1px solid black; // Hardcoded q(1)
}

@mixin gallery_image_img {
    // @include reset_bleed;
    // @include ratio_1x1; // TODO: dependency not available
    // @include image_cover; // TODO: dependency not available
    aspect-ratio: 1 / 1; // Fallback for ratio_1x1
    object-fit: cover; // Fallback for image_cover
    width: 100%;
    height: 100%;
}