.masonry {
  --bb-masonry-gap: var(--bb-site-margins);
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 0 var(--bb-masonry-gap);
  width: 100%;
}

.masonry.is-masonry-ready {
  display: block;
}

.masonry-item {
  display: block;
  width: calc(50% - (var(--bb-masonry-gap) / 2));
  margin-bottom: calc(var(--bb-masonry-gap) * 2);
}

.masonry-item>* {
  max-width: 100%;
}

.masonry-item img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .masonry-item {
    width: 100%;
  }
}