/*-- For Main Content --*/
/*-- For Two Columns --*/
.main-grid-container {
    display: grid;
    grid-template-columns: 49.5% 49.5%;
    grid-gap: 10px;
    margin: 10px;
}
.main-grid-item {
    background-color: whitesmoke;
    padding: 10px;
    /*overflow: auto;*/
    border-radius: 5px;
    box-shadow: 0 0 3px black;
}
@media screen and (max-width: 1024px) { /*-- iPad --*/
    .main-grid-container {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 10px;
    }
}
@media screen and (min-width: 1025px) { /*-- Screen Bigger than iPad's --*/
    .item-big {
        grid-column: span 2;
    }
}


/*-- For Three Columns --*/
.main-grid-container-3 {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    grid-gap: 10px;
}
.main-grid-item-3 {
    background-color: whitesmoke;
    padding: 10px;
    /*overflow: auto;*/
    border-radius: 5px;
    box-shadow: 0 0 3px black;
}
@media screen and (max-width: 1024px) { /*-- iPad --*/
    .main-grid-container-3 {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 10px;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1366px) { /*-- Laptop --*/
    .main-grid-container-3 {
        display: grid;
        grid-template-columns: 50% 50%;
        grid-gap: 10px;
    }
    .item-big-3 {
        grid-column: span 2;
    }
}
@media screen and (min-width: 1367px) { /*-- Screen Bigger than iPad's --*/
    .item-big-2 {
        grid-column: span 2;
    }
    .item-big-3 {
        grid-column: span 3;
    }
}


/*-- For Form Three Columns Style --*/
.main-grid-container-form {
    display: grid;
    grid-template-columns: 1fr 35% 1fr;
    grid-auto-rows: auto;
    grid-template-areas: 
    ". item .";
    margin: 10px;
}
.main-grid-item-form {
    grid-area: item;
    padding: 10px;
    background-color: whitesmoke;
    border-radius: 5px;
    box-shadow: 0 0 3px black;
}
@media screen and (max-width: 1024px) { /*-- iPad --*/
    .main-grid-container-form {
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        grid-template-areas: 
        "item";
    }
}
@media screen and (min-width: 1025px) and (max-width: 1366px) { /*-- Laptop --*/
    .main-grid-container-form {
        display: grid;
        grid-template-columns: 1fr 50% 1fr;
        grid-auto-rows: auto;
        grid-template-areas: 
        ". item .";
    }
}
.main-grid-container-form-large {
    display: grid;
    grid-template-columns: 1fr 75% 1fr;
    grid-auto-rows: auto;
    grid-template-areas: 
    ". item .";
    margin: 10px;
}
.main-grid-item-form-large {
    grid-area: item;
    padding: 10px;
    background-color: whitesmoke;
    border-radius: 5px;
    box-shadow: 0 0 3px black;
}
@media screen and (max-width: 1024px) { /*-- iPad --*/
    .main-grid-container-form-large {
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        grid-template-areas: 
        "item";
    }
}
@media screen and (min-width: 1025px) and (max-width: 1366px) { /*-- Laptop --*/
    .main-grid-container-form-large {
        display: grid;
        grid-template-columns: 1fr 95% 1fr;
        grid-auto-rows: auto;
        grid-template-areas: 
        ". item .";
    }
}
@media screen and (min-width: 1367px) { /*-- Monitors --*/
    .main-grid-container-form-large {
        display: grid;
        grid-template-columns: 1fr 80% 1fr;
        grid-auto-rows: auto;
        grid-template-areas: 
        ". item .";
    }
}


/*-- For Form Three Columns Style --*/
.main-grid-container-search {
    display: grid;
    grid-template-columns: 1fr 25% 1fr;
    grid-auto-rows: auto;
    grid-template-areas: 
    ". item .";
}
.main-grid-item-search {
    grid-area: item;
    padding: 10px;
    background-color: whitesmoke;
    border-radius: 5px;
    box-shadow: 0 0 3px black;
}
@media screen and (max-width: 1024px) { /*-- iPad --*/
    .main-grid-container-search {
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        grid-template-areas: 
        "item";
    }
}
@media screen and (min-width: 1025px) and (max-width: 1366px) { /*-- Laptop --*/
    .main-grid-container-search {
        display: grid;
        grid-template-columns: 1fr 50% 1fr;
        grid-auto-rows: auto;
        grid-template-areas: 
        ". item .";
    }
}