.wrapper {
  margin: 2em auto;
  max-width: 970px;
}

img {
  vertical-align: middle;
  max-width: 100%;
}

.masonry {
  display: flex;
  width: 100%;
}

a {
  color: #333;
}

.masonry--h {
  flex-flow: row wrap;
}

.masonry--v {
  flex-flow: column wrap;
  max-height: 1080px;
}

.masonry--h,
.masonry--v {
  /*margin-left: -8px; /* Adjustment for the gutter */
  counter-reset: brick;
}

.masonry-brick {
  overflow: hidden;
  /*border-radius: 5px;*/
  margin: 5px;  /* Some Gutter */
  background-color: #fc9400;
  color: white;
  position: relative;
}

/*.masonry-brick:after {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5000;
  transform: translate(-50%, -50%);
  counter-increment: brick;
  content: counter(brick);
  transition: font-size .25s, opacity .25s ease-in-out;
  font-weight: 700;
  opacity: .5;
  font-size: 1.25em;
}

.masonry-brick:hover:after {
  font-size: 2.25em;
  opacity: 1;
}*/

.masonry-brick--h {
  flex: auto;
  height: auto;
  min-width: 150px;
}

@media only screen and (min-width: 1024px) {
  /* Horizontal masonry bricks on desktop-sized screen */
  .masonry-brick--h:nth-child(4n+1) {
    width: 33.33%;
  }
  .masonry-brick--h:nth-child(4n+2) {
    width: 33.33%;
  }
  .masonry-brick--h:nth-child(4n+3) {
    width: 33.33%;
  }
  .masonry-brick--h:nth-child(4n+4) {
    width: 33.33%;
  }

  /* Adjusting vertical masonry height on desktop-sized screen */
  .masonry--v {
    /*max-height: 1600px;*/
  }

  /* Vertical masonry bricks on desktop-sized screen */
  .masonry-brick--v {
    width: 33.33333%;
  }
}

@media only screen and (max-width: 1023px) and (min-width: 768px) {
  /* Horizontal masonry bricks on tabled-sized screen */
  .masonry-brick--h:nth-child(4n+1) {
    width: 750px;
  }
  .masonry-brick--h:nth-child(4n+2) {
    width: 250px;
  }
  .masonry-brick--h:nth-child(4n+3) {
    width: 500px;
  }
  .masonry-brick--h:nth-child(4n+4) {
    width: 125px;
  }

  /* Adjusting vertical masonry height on tablet-sized screen */
  .masonry--v {
    /*max-height: 2000px;*/
  }

  /* Vertical masonry bricks on tablet-sized screen */
  .masonry-brick--v {
    width: 50%;
  }
}

@media only screen and (max-width: 767px) {
  /* Horizontal masonry bricks on tabled-sized screen */
  .masonry-brick--h:nth-child(4n+1) {
    width: 50%;
  }
  .masonry-brick--h:nth-child(4n+2) {
    width: 50%;
  }
  .masonry-brick--h:nth-child(4n+3) {
    width: 50%;
  }
  .masonry-brick--h:nth-child(4n+4) {
    width: 50%;
  }
}

.masonry-img {
  /*
  background-position:right center;*/
  
  object-fit: cover;
  object-position: right;
  width: 100%;
  height: 100%;
  top:0;right:0; left:0;
  position: relative;
  /*filter: brightness(75%);*/
}