
.block-list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin: 0;
    min-width: 100vh;
}

.block-list .collection-sample-sale .countdown {
    color: #863331;
}

.block-list li {
    width: 25%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.block-list li .sold-out-text {
    display: none;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.2rem;
    padding-bottom: 10px;
}

.block-list li a {
    display: block;
    overflow: hidden;
    padding-bottom: 150%;
    position: relative;
}

.block-list li a > div {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.block-list li.intro {
    width: 50%;
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    height: auto;
}

.block-list li.intro .inner {
    padding: 75px;
    max-width: 650px;
    text-align: center;
}

.block-list li.intro .inner .title-image {
    transform: none;
    width: 220px;
    margin-bottom: 30px;
    height: auto;
}

.block-list li img,
.block-list li video {
    -webkit-transform: translate3D(0, 0, 0);
    width: 100%;
    height: 100%;
    transition: opacity .2s ease-in-out;
    border: 0;
    /* transform: scale(1.08); */
    object-fit: cover;
    object-position: center;
}

.block-list li .meta {
    position: absolute;
    bottom: 20px;
    left: 25px;
    color: black;
}

.block-list li .meta.text-white {
    color: white;
}

.block-list li .meta.text-gray {
    color: gray;
}

.block-list li a:hover img,
.block-list li a:hover video {
    opacity: 0.6;
}

.page-collection h1 {
    font-size: 3rem;
    line-height: 1;
}

.page-collection .block-list li .meta {
    opacity: 0;
    transition: opacity .2s ease-in-out;
}

.page-collection .block-list li a:hover .meta {
    opacity: 1;
}

.block-list li .product-title,
.block-list li .product-price {
    display: inline;
    margin: 0;
}

.block-list li .compare {
    color: #999999;
    display: none;
    text-decoration: line-through;
    margin-left: 3px;
}

.block-list li .sub-product-title {
    display: block;
    font-size: 13px;
}
@media only screen and (max-width : 1024px) {
    .block-list {
        min-width: auto;
    }

    .block-list li.intro,
    .block-list li,
    #product-details,
    #product-gallery,
    #materials-list li.intro {
        width: 100%;
    }

    .page-collection .block-list li .meta {
        opacity: 100;
    }

    .block-list li.intro .inner,,
    .project-info .inner {
        padding: 75px 25px 38px 25px;
    }
}