/* SMART GRID
-----------------------------*/

ul.smart-grid { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; list-style: none; padding: 0; margin: 0 -0.5rem; }
ul.smart-grid li { margin-bottom: 10px; padding: 0 6px; -webkit-transition: all 0.7s; transition: all 0.7s; }
ul.smart-grid li:first-child { width: 100%; }
ul.smart-grid li:nth-child(2):last-child { margin-left: 25%; width: 50%; }
ul.smart-grid li:nth-last-child(3):first-child ~ li { width: 50% }
ul.smart-grid li { width: 33.333%; }
ul.smart-grid li:nth-last-child(3n+0):first-child ~ li:nth-child(n+2):nth-child(-n+3) { width: 50%; }
ul.smart-grid li:nth-last-child(3n+2):first-child ~ li:nth-child(n+2):nth-child(-n+5) { width: 50%; }
ul.smart-grid li:nth-last-child(3n+2):first-child ~ li:nth-child(n+2):nth-child(-n+3) { width: 50%; }
@media (max-width: 575px) {
  ul.smart-grid li { width: 100% !important; }
}

/* BRICK MASONRY GRID
-----------------------------*/

.brick-masonry { padding: 0; columns: 3; column-gap: 1em; }
.brick-masonry .brick { display: block; position: relative; margin: 0 0 1em; overflow: hidden; }
.brick-masonry .brick .brick-photo { width: 100%; display: block; }
.brick-masonry .brick .brick-photo img { display: block; width: 100%; max-width: 100%; height: auto; }
.brick-masonry .brick .caption { display: none; position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.7); color: #fff; padding: .5em; z-index: 1000; }
.brick-masonry .brick:hover .caption, .brick-masonry .brick:focus .caption { display: block; }