.main-width {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
}
.thin-width {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}
.fourth {
    width: 25%;
}
.three-fourths{
    width: 75%;
}
.third {
    width: 33%;
} 
.two-thirds {
    width: 66%;
}
.half {
    width: 50%;
}
.sml-half {
    width: 45%;  
}
.sml-half-2 {
    width: 48%;  
}
.full {
    width: 100%;
}
.fifth {
    width: 20%;
}
.three-fifths {
    width: 60%
}

@media screen and (max-width: 1280px) {
    .four-fifths {
        width: 80%;
    }
}
@media screen and (max-width: 1024px) {
    .width-1024 {
        width: 95%;
    }
}

@media screen and (min-width: 1025px) {
    .grid li.third {
        width: calc(33% - 2rem);
    }
    .grid li.half {
        width: calc(50% - 2rem);
    }
    .grid li {
        margin: 1rem;
    }
}