:root {
    --grid-column-gap: 20;
}


nav ul {
    display: inline-block;
}

nav ul li {
    display: inline-block;
}

section {
    width: 100vw;
}

div.content {
    width: 100%;
    max-width: 960px;
    padding: 0 calc(var(--grid-column-gap) * 1px);
}

.grid {
    display: flex;
    flex-flow: row wrap;
    flex-basis: auto;
}

.grid.row {
    margin-left: calc(var(--grid-column-gap) * -1px);
    width: calc(100% + var(--grid-column-gap) * 1px);
}

.grid.row.swiper-container {
    margin-left: 0;
    width: 100%;
}

div.grid .grid-item {
    width: calc(100% - var(--grid-column-gap) * 1px);
    margin-left: calc(var(--grid-column-gap) * 1px);
    margin-bottom: calc(var(--grid-column-gap) * 1px);
}

div.grid .grid-item.m33 {
    width: calc(33% - var(--grid-column-gap) * 1px);
}

div.grid .grid-item.m50 {
    width: calc(50% - var(--grid-column-gap) * 1px);
}

@media (min-width: 960px) {

    div.content {
        padding: 0;
        margin: 0 auto;
    }

    div.grid .grid-item {
        margin-left: calc(var(--grid-column-gap) * 1px);
        width: calc(100% - var(--grid-column-gap) * 1px);
    }

    .grid.row {
        margin-left: calc(var(--grid-column-gap) * -1px);
        width: calc(100% + var(--grid-column-gap) * 1px);
    }

    div.grid .grid-item.w100 {
        width: calc(100% - var(--grid-column-gap) * 1px);
    }

    div.grid .grid-item.w80 {
        width: calc(80% - var(--grid-column-gap) * 1px);
    }

    div.grid .grid-item.w75 {
        width: calc(75% - var(--grid-column-gap) * 1px);
    }

    div.grid .grid-item.w66 {
        width: calc(66.66% - var(--grid-column-gap) * 1px);
    }

    div.grid .grid-item.w60 {
        width: calc(60% - var(--grid-column-gap) * 1px);
    }

    div.grid .grid-item.w50 {
        width: calc(50% - var(--grid-column-gap) * 1px);
    }

    div.grid .grid-item.w33 {
        width: calc(33.33% - var(--grid-column-gap) * 1px);
    }

    div.grid .grid-item.w25 {
        width: calc(25% - var(--grid-column-gap) * 1px);
    }

    div.grid .grid-item.w20 {
        width: calc(20% - var(--grid-column-gap) * 1px);
    }
}