.masonry {
    --masonry-gap: 1rem;
    --masonry-brick-width: 180px;
    column-gap: var(--masonry-gap);
    column-fill: initial;
    column-width: var(--masonry-brick-width);
}

.masonry > * {
    break-inside: avoid;
    margin-bottom: var(--masonry-gap);
}

@supports(grid-template-rows: masonry) {
    .masonry {
      display: grid;
      gap: var(--masonry-gap);
      grid-template-rows: masonry;
      grid-template-columns: repeat(auto-fill, minmax(var(--masonry-brick-width), 1fr));
      align-tracks: stretch;
    }

    .masonry > * {
        margin-bottom: initial;
    }
}

/* some styling not important */
.masonry {
    /*background: #f3f3f3;
    padding: 2rem;*/
}
.brick:nth-child(4n - 7) {
    /*background: #5A363A;*/
}

.brick:nth-child(4n - 6) {
    /*background: #82212C;*/
}

.brick:nth-child(4n - 5) {
    /*background: #3A3E41;*/
}

.brick:nth-child(4n - 4) {
    /*background: #292A2B;*/
}
.brick {
    /*color: white;*/
}

.brick .card img {
  width: 100%;
  display: block;
  border-radius: 0px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}


/* larger */
@media (min-width: 1024px) {
  .masonry {
    column-count: 4;
  }
}

/* medium */
@media (max-width: 1023px) and (min-width: 768px) {
  .masonry {
    column-count: 3;
  }
}

/* small, anything smaller will be 1 column by default */
@media (max-width: 767px) and (min-width: 540px) {
  .masonry {
    column-count: 2;
  }
}