.gallery {
  column-count: 4;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 20px; }
  .gallery.flex {
    display: flex;
    flex-wrap: wrap; }
    .gallery.flex .item {
      flex: 1 0 21%; }
  .gallery.has-shadow .item img, .gallery.has-shadow .item figure {
    box-shadow: 2px 2px 4px 0 rgba(var(--bs-body-color-rgb), 0.25); }
  .gallery.masonry {
    margin: 0px;
    padding: 0; }
  .gallery.grid {
    display: grid; }
  .gallery .item {
    margin-bottom: 20px;
    width: 100%;
    transition: 1s ease all;
    box-sizing: border-box; }
    .gallery .item figure {
      margin: 0;
      width: 100%; }
  .gallery .item a {
    display: block;
    width: 100%;
    height: 100%; }
  .gallery .item img, .gallery .item figure {
    max-width: 100%;
    cursor: pointer; }
  .gallery.cover .item figure, .gallery.cover .item img {
    height: 100%;
    width: 100%;
    max-width: initial;
    min-height: 100%;
    min-width: 100%;
    object-fit: cover; }
  .gallery.hover-effect .item {
    overflow: hidden; }
    .gallery.hover-effect .item img {
      width: calc(100% + 50px);
      max-width: calc(100% + 50px);
      transition: opacity 0.35s, transform 0.35s;
      transform: translate3d(-40px, 0, 0); }
      .gallery.hover-effect .item img:hover {
        transform: translate3d(0, 0, 0);
        transition: opacity 0.35s, transform 0.35s;
        filter: brightness(0.8) contrast(1.5); }
  @media only screen and (max-width: 320px) {
    .gallery .masonry {
      column-count: 1 !important; } }
  @media only screen and (min-width: 321px) and (max-width: 768px) {
    .gallery .masonry {
      column-count: 2; } }
  @media only screen and (min-width: 769px) and (max-width: 1200px) {
    .gallery .masonry {
      column-count: 3; } }
  @media only screen and (min-width: 1201px) {
    .gallery .masonry {
      column-count: 4; } }
