/*reset css and base styles like html border-box/inherit, */
html {box-sizing: border-box;
        font-size: 62.5%;}

*,*::before, *::after {box-sizing: inherit;}

body, ul, li {margin:0px;
                padding:0px}

img {width:100%}

.wrapper {max-width:1200px;
          margin:auto}

header {margin-top: 8%;
         margin-bottom: 2.5%;}

nav {align-self: center;
     margin-top: 8%;
      margin-bottom: 2.5%;}

li {list-style-type: none;}

a {text-decoration: none;}

/*typography*/

@font-face {font-family: Arimo;
    src: url(../fonts/Arimo_heading.ttf);}

@font-face {font-family: Andika;
    src: url(../fonts/Andika_subheading.ttf);}

@font-face {font-family: Chiron;
    src: url(../fonts/Chiron_body.ttf);}


h1 {font-family:"Arimo", sans-serif;
    font-size: 4em;}

ul {font-family: "Arimo", sans-serif;
     font-size: 2em;}

h2 {font-family: "Arimo", sans-serif;
    font-size: 7em;}

h3 {font-family: "Andika", sans-serif;
    font-size: 5em;}
  
h4 {font-family: "Andika", sans-serif;
    font-size: 3em;}

h5 {font-family: "Andika", sans-serif;
    font-size: 2em;}

p {font-family: "Chiron", sans-serif;
    font-size: 1.5em;}

.introtitles {text-align: center;
              margin-top: 15%;}




/*layout- media queries/grid or flex */

.grid1 {display: grid;
          grid-template-columns: 1fr 1fr;
            gap:2rem}

ul {display: flex;
      justify-content: space-between;
         align-items: flex-end;}
        
.introtitles, .introimage, .introtext, .about-image, .about-title, .purpose-text, .target-text {grid-column: 1/3;}

/* Mobile Page */
@media screen and (width >= 320px){
    
    .introtitles, .introimage {grid-column:1fr}
    .about-title {text-align: center;}
    .about-image, .interior-img, .interior-img2 {grid-column: 1/3;
                    display: block;
                      margin: auto;
                        width: 100%;
                           max-width: 480px;}

    .interior-p1, .interior-p2 {grid-column: 1/3;}

    .gallery, .about-gallery {display:grid;
              grid-template-columns: 1fr 1fr;
               gap:2rem}

    .card-1 {grid-column: 1/3;
             grid-row: 1/2;}
    .card-2 {grid-column: 1/3;
             grid-row: 2/3;}
    .card-3 {grid-column: 1/3;
             grid-row: 3/4;}
    .card-4 {grid-column: 1/3;
             grid-row: 4/5;}

    .card1 {grid-column: 1/2;
           grid-row: 1/2;}
    .card2 {grid-column: 1/2;
           grid-row: 2/3;}
    .card3 {grid-column: 1/2;
           grid-row: 3/4;}
    .card4 {grid-column: 1/2;
           grid-row: 4/5;}

    .text1 {grid-column: 2/3;
            grid-row: 1/2;
              width: 100%;}
    .text2 {grid-column: 2/3;
             grid-row: 2/3;}
    .text3 {grid-column: 2/3;
             grid-row: 3/4;}
    .text4 {grid-column: 2/3;
             grid-row: 4/5;}    

                      }

/* Tablet Page */

@media screen and (width >= 481px){
    
    .introtitles {grid-column:1/2;}
    .introimage {grid-column:2/3;}
    .about-image {grid-column: 1/3;
                    display: block;
                      margin: auto;
                        width: 100%;
                           max-width: 600px;}

    .gallery, .about-gallery {display:grid;
                                grid-template-columns: 1fr 1fr;
                                    gap:2rem}

    .interior-img {grid-column: 1/2;
                   grid-row: 3/4;
                     display: block;
                      margin: auto;
                        width: 100%;
                          min-width: 300px;}
    .interior-img2 {grid-column: 2/3;
                   grid-row: 4/5;
                      display: block;
                      margin: auto;
                        width: 100%;
                           min-width: 300px;}

    .interior-p1 {grid-column: 2/3;
                 grid-row: 3/4;}
    .interior-p2 {grid-column: 1/2;
                 grid-row: 4/5;}

    .card-1 {grid-column: 1/2;
             grid-row: 1/2;}
    .card-2 {grid-column: 2/3;
             grid-row: 1/2;}
    .card-3 {grid-column: 1/2;
             grid-row: 2/3;}
    .card-4 {grid-column: 2/3;
             grid-row: 2/3;}

    .card1 {grid-column: 1/2;
           grid-row: 1/2;}
    .card2 {grid-column: 2/3;
           grid-row: 1/2;}
    .card3 {grid-column: 1/2;
           grid-row: 3/4;}
    .card4 {grid-column: 2/3;
           grid-row: 3/4;}

    .text1 {grid-column: 1/2;
            grid-row: 2/3;}
    .text2 {grid-column: 2/3;
             grid-row: 2/3;}
    .text3 {grid-column: 1/2;
             grid-row: 4/5;}
    .text4 {grid-column: 2/3;
             grid-row: 4/5;} 

                  }
    
/* Desktop Page */

@media screen and (width >=769px){
    
  .gallery, .about-gallery{display:grid;
              grid-template-columns: 1fr 1fr 1fr 1fr;}

  .about-image {grid-column: 1/3;
                    display: block;
                      margin: auto;
                        width: 100%;
                           max-width: 780px;}

    .card-1 {grid-column: 1/2;}
    .card-2 {grid-column: 2/3;}
    .card-3 {grid-column: 3/4;
               grid-row: 1/2;}
    .card-4 {grid-column: 4/5;
                grid-row: 1/2;}

    .card1 {grid-column: 1/2;
           grid-row: 1/2;}
    .card2 {grid-column: 2/3;
           grid-row: 1/2;}
    .card3 {grid-column: 3/4;
           grid-row: 1/2;}
    .card4 {grid-column: 4/5;
           grid-row: 1/2;}

    .text1 {grid-column: 1/2;
            grid-row: 2/3;}
    .text2 {grid-column: 2/3;
             grid-row: 2/3;}
    .text3 {grid-column: 3/4;
             grid-row: 2/3;}
    .text4 {grid-column: 4/5;
             grid-row: 2/3;}  
             


  }