.masonry-container {
  margin-top: 3.8rem;
  margin-bottom: 6.5rem;
  display: grid;
  gap: 1.5rem;
}
.masonry-container .masonry {
  transition: top 0.2s ease-in-out;
}
@media (min-width: 768px) {
  .masonry-container .masonry {
    position: absolute;
  }
}

.masonry-item {
  position: relative;
  box-sizing: border-box;
  margin-bottom: 0;
  padding: 0;
  overflow: hidden;
}
.masonry-item.work-text {
  background: var(--blue);
  height: 100%;
  border-radius: var(--border-radius);
}
.masonry-item.work-text p {
  padding: 5rem 4rem;
  color: var(--grey);
  font-size: calc(var(--font-size-quote) - 2.5rem);
  hyphens: unset;
  line-height: var(--line-height-quote);
  font-weight: var(--font-weight-regular);
}
@media (min-width: 1200px) {
  .masonry-item.work-text p {
    font-size: calc(var(--font-size-quote) - 1.5rem);
  }
}
@media (min-width: 1400px) {
  .masonry-item.work-text p {
    font-size: var(--font-size-quote);
  }
}
.masonry-item img {
  width: 100%;
  border-radius: var(--border-radius);
}
@media only screen and (min-width: 768px) {
  .masonry-item img {
    height: 100%;
  }
}
.masonry-item a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
}
.masonry-item figcaption {
  font-size: var(--font-size-figcaption);
  line-height: var(--line-height-figcaption);
  font-weight: var(--font-weight-regular);
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .masonry-item figcaption {
    position: absolute;
    left: 2rem;
  }
  .masonry-item figcaption.bottom {
    bottom: -2px;
    left: 2.1rem;
  }
  .masonry-item figcaption.top {
    top: 3px;
  }
  .masonry-item figcaption.dark {
    color: var(--grey) !important;
  }
  .masonry-item figcaption.light {
    color: var(--dm-body-color) !important;
  }
}

/*# sourceMappingURL=work.css.map */