#list { min-height: 400px; }
.grid-sizer { width: 16.66666666%; }
.item { width: 16.66666666%; height: 16.66666666vw; background-color: #cc9; background-position: center; background-size: cover; padding: 0; border: 3px solid #fff; display: flex; align-items: center; background-color: #FFF; overflow: hidden; }
.item.w2 { width: 33.33333333%; }
.item.w3 { width: 50%; }
.item.w4 { width: 66.66666666%; }
.item.w5 { width: 83.33333333%; }
.item.w6 { width: 100%; }
.item.h2 { height: 33.33333333vw; }
.item.h3 { height: 50vw; }
.item.h4 { height: 66.66666666vw; }
.item.h5 { height: 83.33333333vw; }
.item.h6 { height: 100vw; }
.packery:after { content: ' '; display: block; clear: both; }

@media (max-width: 1199px) {
    grid-sizer { width: 25%; }
    .item { width: 25%; height: 25vw; }
    .item.w2 { width: 50%; }
    .item.w3 { width: 75%; }
    .item.w4, .item.w5, .item.w6 { width: 100%; }
    .item.h2 { height: 50vw; }
    .item.h3 { height: 75vw; }
    .item.h4, .item.h5, .item.h6 { height: 100vw; }
}

@media (max-width: 991px) {
    grid-sizer { width: 33.3333333%;}
    .item { width: 33.3333333%; height: 33.3333333vw; }
    .item.w2 { width: 66.666666%; }
    .item.w3, .item.w4, .item.w5, .item.w6 { width: 100%; }
    .item.h2 { height: 66.666666vw; }
    .item.h3, .item.h4, .item.h5, .item.h6 { height: 100vw; }
}

@media (max-width: 767px) {
    grid-sizer { width: 50%; }
    .item { width: 50%; height: 50vw; }
    .item.w2, .item.w3, .item.w4, .item.w5, .item.w6 { width: 100%; }
    .item.h2, .item.h3, .item.h4, .item.h5, .item.h6 { height: 100vw; }
}

@media (min-width: 768px) {
    .container { width: 750px; }
    .con-item { width: 185px; height: 185px; }
    .con-item.w2 { width: 370px; } 
    .con-item.w3 { width: 555px; }
    .con-item.w4 { width: 740px; }
    .con-item.h2 { height: 370px; }
    .con-item.h3 { height: 555px; }
    .con-item.h4 { height: 740px; }
}

@media (min-width: 992px) {
    .container {  width: 970px; }
    .con-item { width: 240px; height: 240px; }
    .con-item.w2 { width: 480px; }
    .con-item.w3 { width: 720px; }
    .con-item.w4 { width: 960px; }
    .con-item.h2 { height: 480px; }
    .con-item.h3 { height: 720px; }
    .con-item.h4 { height: 960px; }
}

@media (min-width: 1200px) {
    .container { width: 1170px; }
    .con-item { width: 290px; height: 290px; }
    .con-item.w2 { width: 580px; }
    .con-item.w3 { width: 870px; }
    .con-item.w4 { width: 1160px; }
    .con-item.h2 { height: 580px; }
    .con-item.h3 { height: 870px; }
    .con-item.h4 { height: 1160px; }
}

.items { text-align: center; text-decoration: none !important; position: relative; float: none; display: table-cell; padding: 0; }
.items img { width: 100%; }
.items .head { transition: all 0.5s; font-weight: normal; font-size: 16pt; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; padding: 25px; color: #fff; height: auto; background-color: rgba(0,0,0,0.5); opacity: 0; }
.items:hover .head { height: 100%; padding: 35% 25px; background-color: rgba(0,0,0,0.7); opacity: 1; }
.hover-detail { display: flex; align-items: center; justify-content: center; font-size: 16px; background-color: #0007; opacity: 0; }
.item:hover .hover-detail { opacity: 1; -webkit-transition: opacity 125ms ease-in; -moz-transition: opacity 125ms ease-in; -o-transition: opacity 125ms ease-in; -ms-transition: opacity 125ms ease-in; transition: opacity 125ms ease-in; }

.collection-image-container > div { height: 330px; background-size: cover; background-position: center; }

.box-loader { top: unset !important; height: 300px; }