/* sm 576px -->      */
@media screen and (min-width:576px) {

    .sm-50 {
        width: 50%;
    }

    .sm-33 {
        width: 33.333%;
    }

    .sm-25 {
        width: 25%;
    }

    .sm-20 {
        width: 20%;
    }

    .sm-16 {
        width: 16.66%;
    }

}

/* md 768px  -->    */
@media screen and (min-width:768px) {
    .md-50 {
        width: 50%;
    }

    .md-33 {
        width: 33.333%;
    }

    .md-25 {
        width: 25%;
    }

    .md-20 {
        width: 20%;
    }

    .md-16 {
        width: 16.66%;
    }

}

/* lg 992px  -->       */
@media screen and (min-width:992px) {
    .lg-50 {
        width: 50%;
    }

    .lg-33 {
        width: 33.333%;
    }

    .lg-25 {
        width: 25%;
    }

    .lg-20 {
        width: 20%;
    }

    .lg-16 {
        width: 16.66%;
    }

    .container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: auto auto auto auto;
        gap: 0px 0px;
        grid-auto-flow: row;
        grid-template-areas:
        "iphone iphone rotary rotary"
        "keyboard imac imac icloud"
        "games muchbetter muchbetter icloud"
        "twitter popular vision vision";
    }
    
}

/* xl 1200px  -->       */
@media screen and (min-width:1200px) {
    .xl-50 {
        width: 50%;
    }

    .xl-33 {
        width: 33.333%;
    }

    .xl-25 {
        width: 25%;
    }

    .xl-20 {
        width: 20%;
    }

    .xl-16 {
        width: 16.66%;
    }

}

/* xxl 1400px  -->       */
@media screen and (min-width:1400px) {
    .xxl-50 {
        width: 50%;
    }

    .xxl-33 {
        width: 33.333%;
    }

    .xxl-25 {
        width: 25%;
    }

    .xxl-20 {
        width: 20%;
    }

    .xxl-16 {
        width: 16.66%;
    }
}