@charset "utf-8";
/* CSS Document */

header {
    display: grid;
    grid-template-columns: 60% 40%;
}

nav {
    display: grid;
    grid-template-columns: repeat(5, 18.4%);
    grid-gap: 2%;
}

.slogan {
    display: grid;
    grid-template-columns: 10% 80% 10%;    
}

footer {
    display: grid;
    grid-template-columns: 40% 60%;
}

.grid-x-3 {
    display: grid;
    grid-template-columns: repeat(3, 33%);
}

.grid-x-4 {
    display: grid;
    grid-template-columns: repeat(4, 25%);
}

.grid-x-5 {
    display: grid;
    grid-template-columns: repeat(5, 20%);
}

.list-3 {
    display: grid;
    grid-template-columns: 20% 20% 30% 30%;
}

.stone-descriptions {
    display: grid;
    grid-template-columns: 70% 30%;
}

.gallery {
    display: grid;
    grid-template-columns: 32% 32% 32%;
    grid-column-gap: 1%;
    grid-row-gap: 5px;
}

.offset-gallery {
    display: grid;
    grid-template-columns: 25% 48% 25%;
    grid-column-gap: 1%;
    margin-bottom: 7px;
}

.two-across {
    display: grid;
    grid-template-columns: 49% 49%;
    grid-column-gap: 2%;    
    grid-row-gap: 5px;
    margin-bottom: 7px;
}

.three-across {
    display: grid;
    grid-template-columns: 32% 32% 32%;
    grid-column-gap: 1%;   
    grid-row-gap: 5px;
    margin-bottom: 7px;
}

.home-guarantees {
    display: grid;
    grid-template-columns: 24% 50% 24%;
    grid-gap: 1%;
}    

@media only screen and (max-width: 800px){
    footer {
        grid-template-columns: 100%;
    }
  }

@media only screen and (max-width: 850px){

    .home-guarantees {
        grid-template-columns: 100%;
        grid-row-gap: 10px;
    }

    .service-list .grid-x-4 {
        grid-template-columns: 49% 49%;
        grid-column-gap: 2%;
        grid-row-gap: 10px;
    }
}

@media only screen and (max-width: 700px){
    .gallery {
        grid-template-columns: 50% 50%;
    }
  }

  @media only screen and (max-width: 400px){

    .service-list .grid-x-4  {
        grid-template-columns: 100%;
        grid-column-gap: 2%;
        grid-row-gap: 30px;
    }
}