.faux-masonry-item {
  cursor: pointer; }
  .faux-masonry-item img {
    transition: all ease-in-out 0.4s;
    width: 100%; }
  .faux-masonry-item:hover img {
    filter: brightness(0.8); }

.masonry-container {
  columns: 1;
  /* Number of columns */
  column-gap: 20px;
  /* Spacing between columns */
  overflow: visible; }
  @media screen and (min-width: 768px) {
    .masonry-container {
      columns: 2;
      /* Number of columns */
      column-gap: 30px;
      /* Spacing between columns */
      overflow: visible; } }

.masonry-item {
  display: inline-block;
  /* Essential for items to flow correctly */
  width: 100%;
  /* Items take full width of their column */
  margin-bottom: 20px;
  /* Spacing between items vertically */
  break-inside: avoid;
  /* Prevents items from breaking across columns */
  box-sizing: border-box;
  /* Ensures padding/border are included in width */
  /* Add other styling for your items (e.g., background, padding, border) */
  position: relative;
  text-align: center; }
  .masonry-item img {
    transition: all ease-in-out 0.4s; }
  .masonry-item .title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    padding: 0.5em 1em;
    background-color: pink;
    white-space: nowrap;
    transition: all ease-in-out 0.4s;
    font-size: 1.3em; }
  .masonry-item:hover .title {
    transform: scale(1.05);
    transform: translate(-50%, -50%);
    font-size: 1.5em; }
  .masonry-item:hover img {
    filter: brightness(0.8); }