.grid-container {
    /* --grid-item-min-height: 500px; */
    --gap: 20px;
    vertical-align: top;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
}
#content.grid-container {
    max-width: 1020px;
    /* width: calc(100% - 240px); */
    margin: 0 auto;
}
.grid-item {
    flex: 0 0 calc(50% - var(--gap) / 2);
    overflow: hidden;
    /* min-height: var(--grid-item-min-height); */
}
.grid-item-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
#main .grid-item .caption {
    display: none;
}
#detail .grid-item .caption {
    text-align: center;
}
.grid-item-caption,
.grid-item-caption.caption {
    margin-bottom: 0px;
}
.thumbnail-placeholder {
    padding-bottom: 100%;
    background-color: #ccc;
}
.ellipsis {
    white-space: nowrap;
}
@media screen and (min-width: 1580px) {
    #content.grid-container {
        max-width: none;
        width: 1540px;
    }
    #content.grid-container .grid-item {
        flex: 0 0 500px;
    }
}
@media screen and (min-width: 2100px) {
    #content.grid-container {
        width: 2060px;
    }
}
@media screen and (max-width: 1200px) {
    .box-content {
        padding: 80px;
    }
}
@media screen and (max-width: 1100px) {
    .box-content {
        padding: 60px;
    }
}
@media screen and (max-width: 900px) {
    .grid-container {
        justify-content: center;
        align-items: center;
    }
    .grid-item {
        flex: 0 0 500px;
        max-width: 100%;
        
    }
    .box-content {
        padding: 100px;
    }
}
@media screen and (max-width: 768px) {
    .box-content {
        padding: 80px;
    }
}
@media screen and (max-width: 500px) {
    #main .grid-item :not(.zoom) img {
        width: 100%;
        height: 100%;
    }
    .box-content {
        padding: 60px;
    }
}