.urm-masonary-categories {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  gap: 10px;
}

.urm-masonary-category {
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
  
.urm-masonary-category:nth-child(1) {
  grid-column: span 6 / span 6;
  grid-row: span 8 / span 8;
}

.urm-masonary-category:nth-child(2)  {
  grid-column: span 3 / span 3;
  grid-column-start: 1;
  grid-row: span 4 / span 4;
  grid-row-start: 9;
}

.urm-masonary-category:nth-child(3)  {
  grid-column: span 3 / span 3;
  grid-column-start: 4;
  grid-row: span 4 / span 4;
  grid-row-start: 9;
}

.urm-masonary-category:nth-child(4)  {
  grid-column: span 3 / span 3;
  grid-column-start: 7;
  grid-row: span 4 / span 4;
  grid-row-start: 1;
}

.urm-masonary-category:nth-child(5) {
  grid-column: span 3 / span 3;
  grid-row: span 8 / span 8;
  grid-column-start: 7;
  grid-row-start: 5;
}

.urm-masonary-category:nth-child(6) {
  grid-column: span 3 / span 3;
  grid-row: span 12 / span 12;
  grid-column-start: 10;
  grid-row-start: 1;
}
      

.urm-masonary-categories-wrapper {
  max-width: 1230px;
  margin: auto;
}


.urm-masonary-category img {
  border-radius: 6px;
  transition: transform 1s ease;
}

.urm-masonary-category:hover img {
  transform: scale(1.05);
}

.urm-masonary-category .floating-category-title {
  position: absolute;
  z-index: 1;
  top: 12px;
  left: 12px;
  color: #fff;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}


@media (max-width: 768px) {
  .urm-masonary-categories-wrapper {
    margin: 0 12px;
  }
  
  .urm-masonary-category:nth-child(1) {
    grid-column: span 12 / span 12;
    grid-column-start: 1;
    grid-row: span 4 / span 4;
    grid-row-start: 1;
  }
  
  .urm-masonary-category:nth-child(2) {
    grid-column: span 6 / span 6;
    grid-column-start: 1;
    grid-row: span 4 / span 4;
    grid-row-start: 5;
  }
  
  .urm-masonary-category:nth-child(3) {
    grid-column: span 6 / span 6;
    grid-column-start: 7;
    grid-row: span 4 / span 4;
    grid-row-start: 5;
  }
  
  .urm-masonary-category:nth-child(4) {
    grid-column: span 6 / span 6;
    grid-column-start: 1;
    grid-row: span 4 / span 4;
    grid-row-start: 9;
  }
  
  .urm-masonary-category:nth-child(5) {
    grid-column: span 6 / span 6;
    grid-row: span 8 / span 9;
    grid-column-start: 1;
    grid-row-start: 13;
  }
  
  .urm-masonary-category:nth-child(6) {
    grid-column: span 6 / span 6;
    grid-row: span 13 / span 13;
    grid-column-start: 7;
    grid-row-start: 9;
  }
  
  .urm-masonary-categories {
    grid-template-rows: auto;
  }
}