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


nav ul {
    display: inline-block;
}

nav ul li {
    display: inline-block;
}

section {
    width: 100vw;
}

div.content {
    width: 100%;
    max-width: 1140px;
    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%;
}

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

.swiper-wrapper {
    align-items: stretch;
}

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

.grid.row.reverse {
    flex-direction: row-reverse;
}
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 img {
    display: block;
    max-width: 100%;
    width: 100%;
}

div.grid .grid-item.m20 {
    width: calc(20% - 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: 720px) {
    div.grid .grid-item.w33 {
        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.w40 {
        width: calc(40% - var(--grid-column-gap) * 1px);
    }

    div.grid .grid-item.w30 {
        width: calc(30% - 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);
    }
}