.group-cs-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0 20px;
    height: 100%;
}

.group-cs-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0 20px;
    height: 100%;
}

.group-cs-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
    height: 100%;
}

.dif-group .group-cs-2 {
    grid-template-columns: 2fr 1fr;
    gap: 0px 5px;
}

.group-cs-5 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 0 20px;
    height: 100%;
}

.group-cs-6 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 0 20px;
    height: 100%;
}

.group-cs-1 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 20px;
    height: 100%;
}

@media only screen and (max-width: 767px) {
    .group-cs-sm-1 {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        height: 100% !important;
    }

    .group-cs-sm-2 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0 20px !important;
        height: 100% !important;
    }

    .group-cs-sm-3 {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 0 20px !important;
        height: 100% !important;
    }

    .group-cs-sm-4 {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr 1fr !important;
        gap: 0 20px !important;
        height: 100% !important;
    }

    .group-cs-sm-5 {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr !important;
        gap: 0 20px !important;
        height: 100% !important;
    }

    .group-cs-sm-6 {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr !important;
        gap: 0 20px !important;
        height: 100% !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .group-cs-md-1 {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 20px !important;
        height: 100% !important;
    }

    .group-cs-md-2 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0 20px !important;
        height: 100% !important;
    }

    .group-cs-md-3 {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 0 20px !important;
        height: 100% !important;
    }

    .group-cs-md-4 {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr 1fr !important;
        gap: 0 20px !important;
        height: 100% !important;
    }

    .group-cs-md-5 {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr !important;
        gap: 0 20px !important;
        height: 100% !important;
    }

    .group-cs-md-6 {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr !important;
        gap: 0 20px !important;
        height: 100% !important;
    }
}


@media only screen and (max-width: 567px) {
    .group-cs-xs-1 {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 20px !important;
        height: 100% !important;
    }

    .group-cs-xs-2 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0 20px !important;
        height: 100% !important;
    }

    .group-cs-xs-3 {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 0 20px !important;
        height: 100% !important;
    }

    .group-cs-xs-4 {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr 1fr !important;
        gap: 0 20px !important;
        height: 100% !important;
    }

    .group-cs-xs-5 {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr !important;
        gap: 0 20px !important;
        height: 100% !important;
    }

    .group-cs-xs-6 {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr !important;
        gap: 0 20px !important;
        height: 100% !important;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .group-cs-lg-1 {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 20px !important;
        height: 100% !important;
    }

    .group-cs-lg-2 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0 20px !important;
        height: 100% !important;
    }

    .group-cs-lg-3 {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 0 20px !important;
        height: 100% !important;
    }

    .group-cs-lg-4 {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr 1fr !important;
        gap: 0 20px !important;
        height: 100% !important;
    }

    .group-cs-lg-5 {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr !important;
        gap: 0 20px !important;
        height: 100% !important;
    }

    .group-cs-lg-6 {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr !important;
        gap: 0 20px !important;
        height: 100% !important;
    }
}

@media only screen and (min-width: 1201px) {
    .group-cs-xl-1 {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 20px !important;
        height: 100% !important;
    }

    .group-cs-xl-2 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0 20px !important;
        height: 100% !important;
    }

    .group-cs-xl-3 {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 0 20px !important;
        height: 100% !important;
    }

    .group-cs-xl-4 {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr 1fr !important;
        gap: 0 20px !important;
        height: 100% !important;
    }

    .group-cs-xl-5 {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr !important;
        gap: 0 20px !important;
        height: 100% !important;
    }

    .group-cs-xl-6 {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr !important;
        gap: 0 20px !important;
        height: 100% !important;
    }
}