* {
    padding: 0;
    margin: 0;
    box-sizing: border-box
}

ul,ol {
    padding-left: 20px
}

.home .container{
    max-width: 1280px;
    padding: 0px 15px;
    margin: 0 auto;
}
.container{
    max-width: 1408px;
    padding: 0px 15px;
    margin: 0 auto;
}
.grid {
    display: grid;
    column-gap: 30px;
    row-gap: 30px;
     width: 100%;
    max-width: 100%;
}

.grid:not(:last-child) {
    margin-bottom: 30px;
}
.grid--2-cols {
    grid-template-columns: repeat(2, 1fr);
}

.grid--3-cols {
    grid-template-columns: repeat(3,1fr)
}

.grid--4-cols {
    grid-template-columns: repeat(4,1fr)
}

.grid--5-cols {
    grid-template-columns: repeat(5,1fr)
}
.grid--4-6-cols{
    grid-template-columns: 40% 60%;
}
.grid--6-4-cols{
    grid-template-columns: 60% 40%;
}
.grid--4-8-cols{
    grid-template-columns:33.333% 66.66666%;
}
.grid--center-v {
    align-items: center
}

.grid-2-1-col{
       grid-template-columns: 66.66666% 33.3333%; 
}
.grid-3-1-col {
    grid-template-columns: 75% 25%;
}
.grid-1-3-col{
       grid-template-columns: 25% 75% ; 
}
.grid--5-4-3-cols{
       grid-template-columns: 41.666666666% 33.3333333333% 25%; 
           column-gap: 10px;
}
.grid--3-4-5-cols{
       grid-template-columns: 25% 33.3333333333% 41.666666666%; 
           column-gap: 10px;
}
.col-cate .grid.grid--4-6-cols {
    gap: 10px;
}

@media (max-width: 1024px) {
.grid--4-6-cols, .grid--4-8-cols,  .grid--2-cols, .grid--3-cols {
    grid-template-columns: 100%;
}
.grid{
    row-gap: 10px;
}  
.grid-3-1-col, .grid--5-cols {
    grid-template-columns: 100%;
}
}