/************
 *
 * Image Gallery Styles
 *
 ***********/
/******* Functions *******/
/******* Mixins *******/
/******* Bootstrap *******/
/**
* Fonts
*/
:root {
  --bs-primary: $blue;
  --bs-secondary: $gray-600;
  --bs-tertiary: $teal;
  --bs-success: $green;
  --bs-info: $cyan;
  --bs-warning: $yellow;
  --bs-danger: $red;
  --bs-light: $gray-100;
  --bs-dark: $gray-900;
}

/******* Variables *******/
.image-gallery img {
  -o-object-fit: cover;
     object-fit: cover;
  box-shadow: none !important;
  border-radius: var(--bs-border-radius);
  height: 100%;
}

.image-gallery--masonry .grid {
  display: flex;
  height: auto !important;
  flex-wrap: wrap;
  margin: 0 -0.625rem;
  align-items: flex-start;
  justify-content: flex-start;
}

.image-gallery--masonry .grid-item {
  padding: 0.625rem;
  position: relative !important;
  width: 50%;
  margin: 0 !important;
  aspect-ratio: 4/5;
}

@media (min-width: 768px) {
  .image-gallery--masonry .grid-item {
    width: 25%;
  }
}
@media (min-width: 768px) {
  .image-gallery--masonry .grid-item:nth-of-type(6n + 1), .image-gallery--masonry .grid-item:nth-of-type(6n) {
    width: 50%;
    aspect-ratio: 8/5;
  }
}
.image-gallery--masonry .grid-item img {
  width: 100%;
}