/*----- cover header & slogan ----*/
.grid-cover{
    margin-top: 3.6rem;
    max-width: 100vw;
    display: grid;
    grid-row-gap: 0rem;
    grid-template-rows: 1fr 3fr;
    justify-content: center;
    align-content: center;
    grid-template-areas: 
        "header-logo"
        "header-slogan";
}

.grid-cover .header-logo {
    grid-area: header-logo;
    align-self: center;
    justify-self: center;
}

.grid-cover .slogan {
    grid-area: header-slogan;
    align-self: center;
    justify-self: center;
}

/*----- about-us -----*/
.grid-about {
    width: 100%;
    max-width: 100%;
    margin: 0;
    display: grid;
    grid-column-gap: 2%;
    grid-row-gap: 2%;
    grid-template-columns: repeat(3, 1fr);
    /*grid-template-rows: repeat(2, 1fr);*/
    grid-template-areas: 
        "about     about   about"
        "mision    vision  ilo";
}

.grid-about .about {
    grid-area: about;
}

.grid-about .mision {
    grid-area: mision;
}

.grid-about .vision {
    grid-area: vision;
}

.grid-about .ilo {
    grid-area: ilo;
}

/*----- services -----*/
.grid-services {
    width: 100%;
    max-width: 100%;
    margin: 0;
    display: grid;
    grid-column-gap: 3%;
    grid-row-gap: 2%;
    grid-template-columns: repeat(6, 1fr);
    /*grid-template-rows: repeat(2, 1fr);*/
    grid-template-areas: 
        "strt   strt    frsc    frsc    cstr    cstr"
        "stin   stin    stin    mgmt    mgmt    mgmt";
}

.grid-services .struct {
    grid-area: strt;
}

.grid-services .frnsic {
    grid-area: frsc;
}

.grid-services .constr {
    grid-area: cstr;
}

.grid-services .strinp {
    grid-area: stin;
}

.grid-services .mngmt {
    grid-area: mgmt;
}

@media only screen and (max-width: 768px) {
    .grid-services { 
        grid-template-columns: repeat(12, 1fr);
        grid-template-areas: 
        "strt   strt    frsc    frsc"    
        "cstr   cstr    stin    stin"
        "mgmt   mgmt    mgmt    mgmt";
    }
}

@media only screen and (max-width: 576px) {
    .grid-services {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: 
            "strt   strt"
            "frsc   frsc"
            "cstr   cstr"
            "stin   stin"
            "mgmt   mgmt";
    }
}