masonry-layout.css

masonry-layout.css

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  font-family: 'Montserrat', sans-serif;
  height: 100%;
}

.welcome {
  padding: 3rem 0 1rem;
  font-size: 700;
}

.container {
  max-width: 80vw;
  margin: 0 auto;
}

.details {
  padding: 1rem 1rem;
  background-color: rgba(241, 99, 52, 0.062);
  border-radius: .2rem;
  margin-bottom: .5rem;
  color: #F16334;
  border: 1px solid rgba(241, 99, 52, 0.082);
  line-height: 2;
}


.details a {
  color: #F16334;
  text-decoration: none;
}

/*  the styles applied above this line are optional and
*   are not directly related to *  the masonry lesson */

/* mason layout with pure css */
.masonry-bricks-container {
  padding: .4em 0;
  column-count: 4;
  column-gap: .5rem;
  margin-bottom: 3rem;
}

.masonry-bricks-container img,
.masonry-bricks-container div {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  border-radius: 4px;
  break-inside: avoid;
  margin-bottom: .4rem;
}

@media only screen and (max-width: 1100px) {
  .masonry-bricks-container {
    column-count: 3;
  }
}

@media only screen and (max-width: 750px) {
  .masonry-bricks-container {
    column-count: 2;
  }

  .container {
    max-width: 100%;
    padding: 0 .5rem;
  }
}