/*breakpoints*/
.reference__element {
  background: var(--grey);
}
.reference__element.reference__masonry .gridcontainer {
  height: 1050px;
}
.reference__element .referencecard {
  margin: 0.75rem;
}
@media screen and (min-width: 768px) {
  .referencepage .reference__masonry--area .masonry__margin {
    margin-top: 100px;
  }
}
.reference__masonry .gridcontainer {
  width: 120vw;
  transform: translateX(-10vw);
  display: flex;
  overflow: hidden;
  padding-right: 80px;
}
@media screen and (max-width: 1199.98px) {
  .reference__masonry .gridcontainer {
    height: 800px;
  }
}
@media screen and (max-width: 767.98px) {
  .reference__masonry .gridcontainer {
    height: 700px;
  }
}
@media screen and (max-width: 767.98px) {
  .reference__masonry .gridcontainer {
    height: 900px;
    width: 100vw;
    transform: translateX(0);
  }
}
@media screen and (max-width: 575.98px) {
  .reference__masonry .gridcontainer {
    height: 900px;
    width: 100vw;
    transform: translateX(0);
  }
}
.reference__masonry .gridcontainer .gridrow {
  flex: 0 0 20%;
}
@media screen and (max-width: 1199.98px) {
  .reference__masonry .gridcontainer .gridrow {
    flex: 0 0 20%;
  }
}
@media screen and (max-width: 991.98px) {
  .reference__masonry .gridcontainer .gridrow {
    flex: 0 0 calc(100% / 3);
  }
}
@media screen and (max-width: 767.98px) {
  .reference__masonry .gridcontainer .gridrow {
    flex: 0 0 100%;
  }
}
@media screen and (max-width: 575.98px) {
  .reference__masonry .gridcontainer .gridrow {
    flex: 0 0 100%;
  }
}
.reference__masonry .gridcontainer .gridrow:nth-child(2), .reference__masonry .gridcontainer .gridrow:nth-child(4) {
  margin-top: 100px;
}
@media screen and (max-width: 991.98px) {
  .reference__masonry .gridcontainer .gridrow:nth-child(2), .reference__masonry .gridcontainer .gridrow:nth-child(4) {
    margin-top: 0;
  }
}
.reference__masonry .gridcontainer .gridrow:nth-child(3) {
  margin-top: 200px;
}
@media screen and (max-width: 991.98px) {
  .reference__masonry .gridcontainer .gridrow:nth-child(3) {
    margin-top: 100px;
  }
}
@media screen and (max-width: 575.98px) {
  .reference__masonry .gridcontainer .gridrow:nth-child(3) {
    margin-top: 0;
  }
}
.reference__masonry .referencecard {
  position: relative;
  overflow: hidden;
  transition: var(--transition-default);
}
.reference__masonry .referencecard img {
  transition: var(--transition-default);
}
.reference__masonry .referencecard:hover img {
  transform: scale(1.05);
  transition: var(--transition-default);
}
.reference__masonry .referencecard:hover .referencecard_content .referencecard_content--area {
  transition: var(--transition-default);
  background: var(--primary-color);
}
.reference__masonry .referencecard:hover .referencecard_content .referencecard_content--area span {
  color: var(--white);
  transition: var(--transition-default);
}
.reference__masonry .referencecard .referencecard_content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1.25rem;
}
.reference__masonry .referencecard .referencecard_content .referencecard_content--area {
  background: var(--white);
  padding: 1.25rem;
  ransition: var(--transition-default);
}
/*# sourceMappingURL=data:application/json,%7B%22version%22%3A3%2C%22sources%22%3A%5B%22%2Fthemes%2Fverbundstein%2Fscss%2Fcomponents%2F_referencemasonry.scss%22%2C%22%2Fthemes%2Fverbundstein%2Fscss%2Fcomponents%2F..%2Fsettings%2Fbreakpoints.scss%22%5D%2C%22names%22%3A%5B%5D%2C%22mappings%22%3A%22AAAA%3BAAEA%3BAAAA%3BAAAA%3BAAGQ%3BAAAA%3BAAAA%3BAAIJ%3BAAAA%3BAAAA%3BAC0BA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BADVA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BACNA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAARA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAJA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAD6CI%3BAAAA%3BAAAA%3BACjCJ%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAJA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAJA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAJA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAD%2BDQ%3BAAAA%3BAAAA%3BACvDR%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAD%2BDQ%3BAAAA%3BAAAA%3BAC%2FDR%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAARA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BADmFA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAII%3BAAAA%3BAAAA%3BAAII%3BAAAA%3BAAAA%3BAAAA%3BAAKI%3BAAAA%3BAAAA%3BAAAA%3BAAII%3BAAAA%3BAAAA%3BAAAA%3BAAQZ%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAOI%3BAAAA%3BAAAA%3BAAAA%3BAAAA%22%7D */