html, body {
    height: 100%;
}

em, i {
    font-style: italic;
}

button:hover {
    cursor: pointer;
}

.gssb-container {
    width: calc(100vw - 52px);
    margin: 0 26px;
}

.gssb-container--detail {
    position: relative;
    width: calc(100vw - 52px);
    margin: 0 26px 0;
    /* padding: 24px 24px 0 24px; */
    padding: 24px 0px 0 0px;
    top: -30px;
    background-color: #FFF;
    z-index: 1000;
}

.gssb-grid {
    display: block;
}

.gssb-grid__col--load-more {
    width: 100%;
}

@media screen and (min-width: 768px) {
    .gssb-container {
        width: calc(100vw - 88px);
        margin: 0 44px;
    }
    .gssb-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .gssb-container--detail {
        width: calc(100vw - 60px);
        margin: 0 30px 0;
        padding: 48px 14% 0 14%;
        top: -60px;
    }
}

@media screen and (min-width: 1280px) {

    .gssb-container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
    }

    .gssb-container--detail {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 60px 206px 0 206px;
    }

}

@media screen and (min-width: 768px) {
    .gssb-grid::after {
        content:"";
        /*flex:auto;*/
        width: calc(33% - 24px);
    }
}