@supports (display: grid) {
    .item {
        margin-bottom: 0 !important;
        max-width: 100% !important;
    }

    .grid-con {
        display: grid;
    }

    /* gap 1/2 */
    .gap--05 {
        grid-gap: .5em;
    }

    /* gap 1 */
    .gap--1 {
        grid-gap: 1em;
    }

    /* gap 2 */
    .gap--2 {
        grid-gap: 1em;
    }

    @media (min-width: 800px) {
        .gap--2 {
            grid-gap: 2em;
        }
    }

    /* gap 3 */
    .gap--3 {
        grid-gap: 1em;
    }

    @media (min-width: 800px) {
        .gap--3 {
            grid-gap: 2em;
        }
    }

    @media (min-width: 1025px) {
        .gap--3 {
            grid-gap: 3em;
        }
    }

    /* gap 4 */
    .gap--4 {
        grid-gap: 1em;
    }

    @media (min-width: 800px) {
        .gap--4 {
            grid-gap: 2em;
        }
    }

    @media (min-width: 1025px) {
        .gap--4 {
            grid-gap: 4em;
        }
    }

    /* row 1 */
    .row--1 {
        grid-template-columns: repeat(1, 1fr);
    }

    /* row 2 */
    .row--2 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* row 3 */
    @media (min-width: 700px) {
        .row--3 {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    /* row 4 */
    @media (min-width: 600px) {
        .row--4 {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (min-width: 900px) {
        .row--4 {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    /* row 5 */
    @media (min-width: 600px) {
        .row--5 {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (min-width: 900px) {
        .row--5 {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media (min-width: 1025px) {
        .row--5 {
            grid-template-columns: repeat(5, 1fr);
        }
    }

    /* row 6 */
    @media (min-width: 700px) {
        .row--6 {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media (min-width: 1140px) {
        .row--6 {
            grid-template-columns: repeat(6, 1fr);
        }
    }

    /* row 7 */
    @media (min-width: 600px) {
        .row--7 {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (min-width: 900px) {
        .row--7 {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media (min-width: 1025px) {
        .row--7 {
            grid-template-columns: repeat(7, 1fr);
        }
    }

    /* row 8 */
    .row--8 {
        grid-template-columns: repeat(2, 1fr);
    }

    @media (min-width: 900px) {
        .row--8 {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    @media (min-width: 1025px) {
        .row--8 {
            grid-template-columns: repeat(8, 1fr);
        }
    }
}