/*Normal Styles */

.logo {
    display: grid;
    grid-template-columns: [full-start]4fr [main-start]2fr[main-end] 4fr[full-end];
}


.header {
    display: grid;
    grid-template-columns: [full-start] 1fr [full-end];
}

.header img {
    max-width: 100%;
    padding: 0%;
}

.single {
    display: grid;
    gap: 2rem;
    grid-template-columns: [full-start]15% [main-start]1fr[main-end] 15%[full-end];
}


.trio {
    display: grid;
    gap: 2rem;
    grid-template-columns: [full-start]10% [main-start]3fr 3fr 3fr[main-end] 10%[full-end];
}

.trio img {
    width: 100%;
}

.duo_product {
    display: grid;
    grid-template-columns: 5fr 5fr;
    margin: 0 10%;
    padding: 0 10%;
}

.quad {
    display: grid;
    gap: 2rem;
    grid-template-columns: 2fr 2fr 2fr 2fr;
    margin: 0 10%;

}

.quad img {
    width: 100%;
}

.quin {
    display: grid;
    gap: 2rem;
    grid-template-columns: [full-start]10% [main-start]2fr 2fr 2fr 2fr 2fr[main-end] 10%[full-end];
}

.quin img {
    width: 100%;
}

.desktop {
    display: block;
}

.tablet {
    display: none;
}

.mobile {
    display: none;
}



.logo img {
    max-width: 80%;
    padding: 10%;
}

/*Tab landscape port*/
/*1200px*/
@media only screen and (max-width: 75em) {
    .duo_product {
        display: grid;
        grid-template-columns: 5fr 5fr;
        margin: 0 5%;
        padding: 0;
    }
}

/*Tab port*/
/*900px*/
@media only screen and (max-width: 56.25em) {
    .logo {
        grid-template-columns: [full-start]4fr [main-start]3fr[main-end] 4fr[full-end];
    }

    .single {
        display: grid;
        gap: 2rem;
        grid-template-columns: [full-start]10% [main-start]1fr[main-end] 10%[full-end];
    }

    .duo_product {
        display: grid;
        grid-template-columns: 5fr 5fr;
        margin: 0 5%;
        padding: 0;
    }

    .trio {
        display: grid;
        gap: 1.5rem;
        grid-template-columns: [full-start]2% [main-start]3fr 3fr 3fr[main-end] 2%[full-end];
    }

    .quad {
        display: grid;
        gap: 1.5rem;
        grid-template-columns: [full-start]2% [main-start]2fr 2fr 2fr 2fr[main-end] 2%[full-end];
    }

    .quin {
        display: grid;
        gap: 1.5rem;
        grid-template-columns: [full-start]2% [main-start]2fr 2fr 2fr 2fr 2fr[main-end] 2%[full-end];
    }

    .desktop {
        display: none;
    }

    .tablet {
        display: block;
    }

    .mobile {
        display: none;
    }
}

/*Mob port*/
/*600px*/
@media only screen and (max-width: 37.5em) {
    .logo {
        display: grid;
        grid-template-columns: [full-start]2fr [main-start]3fr[main-end] 2fr[full-end];
    }

    .single {
        display: grid;
        gap: 2rem;
        grid-template-columns: [full-start] 0[main-start]1fr[main-end] 2%[full-end];
    }

    .duo_product {
        display: grid;
        width: 100%;
        grid-template-columns: 1fr 1fr;
        margin: 0;
        padding: 0;
    }

    .trio {
        display: grid;
        gap: 2rem;
        grid-template-columns: [full-start]3fr [full-end];
    }

    .trio img {
        width: 80%;
        margin-left: 50%;
        transform: translateX(-50%);
    }

    .quad {
        display: grid;
        gap: 2rem;
        grid-template-columns: [full-start]5% [main-start]12fr[main-end] 5%[full-end];
    }

    .quin {
        display: grid;
        gap: 2rem;
        grid-template-columns: [full-start]5% [main-start]12fr[main-end] 5%[full-end];
    }

    .desktop {
        display: none;
    }

    .tablet {
        display: none;
    }

    .mobile {
        display: block;
    }
}

/*Small Mob port*/
/*400px*/
@media only screen and (max-width: 25em) {
    .logo {
        display: grid;
        grid-template-columns: [full-start]1fr [main-start]3fr[main-end] 1fr[full-end];
    }
}


.select {
    grid-column: full-start / full-end;
}