* {
   box-sizing: border-box;
}
   body{
      margin: 0;

   }


   .nateContainer {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-row-gap: 20px;
      margin: 0 auto;
      padding: 0;

   }


   #home {
      width: 100%;
      box-sizing: border-box;

      position: relative;
      z-index: 0;

      padding-top: 10vh;
      padding-bottom: 100px;

      height: 100%;


      border-bottom: 5px ridge  rgba(186, 187, 167, 0.842);;
      

    }
    #home::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: url("/public/images/home-image.jpg");
      background-size: cover;
      background-position: 30% 100%;
      filter: blur(1px) ; /* Apply blur to background image */
      z-index: -1; /* Ensure the blurred background stays behind the content */
    }


    .homeButtons {
      box-sizing: border-box;
      display: flex;
      margin-top: 30px;
      
      font-size: 90%;
      width: 100%;
      justify-content: center;
      
      span {
   
         margin: 0 10vw;
         padding: 1.5vw 2vw;
         border: .1px solid black;
         border-radius: 2px;
         background: linear-gradient(#ded9d2, #aea69a);;
         box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);

         
         a {
            
            letter-spacing: 3px;
            text-decoration: none;
            color: black;

            font-weight: 600;

            white-space: nowrap;
         }
      }
    }


    .bannerContainer {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;


      width: 100%;
      height: auto;
      padding: 50px 0px;
      background: linear-gradient(#ded9d2, #aea69a44);
      box-shadow: 10px 0 30px 5px lightgray;

      margin: 5% 0px;
    }
    .normalContainer {
      width: 100%;
      height: auto;
      padding: 50px 0px;
      background: linear-gradient(#ded9d2, #aea69a44);
      box-shadow: 10px 0 30px 5px lightgray;

      margin: 5% 0px;
    }

    .banner {
      width: 450px;
      height: 100%;

      article {
         text-align: center;
         h2 {
            font-size: clamp(1.4rem, 3vw ,1.3rem);
         }
         p {
            margin: 0 auto;
            width: 90%;
            font-size: .8rem;
            font-weight: 300;
         }
      }
    }
    .banner figure {
      position: relative;
      display: flex;
      justify-content: center;
      margin-right: 50px;

      img {
         width: 200px;
         height: 200px;
      }
    }


@media (min-width: 1440px) {
   .nateContainer {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-row-gap: 20px;
      width: 80%;
      margin: 0 auto;
      

   }
}

@media (min-width: 768px) and (max-width: 1040px) {



   .homeButtons {
      box-sizing: border-box;
      display: flex;
      margin-top: 30px;
      
      font-size: 70%;
      width: 100%;
      justify-content: space-between;
      
      span {
      
         padding: .5vw 1vw;
      }
    }

    .nateContainer {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-row-gap: 20px;
      width: 100%;
      margin: 0 auto;
      

   }

}

@media (min-width: 490px) and (max-width: 768px) {



    .homeButtons {
      
      span {
   
         margin: 0 10vw;
         padding: 12px 9px;


         
         a {
            
            letter-spacing: 3px;
            text-decoration: none;
            color: black;

            font-weight: 600;

            white-space: nowrap;
         }
      }
    }
    .nateContainer {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-row-gap: 20px;
      margin: 0 auto;
      
   }

}

@media (max-width: 490px) {

    #home {
      width: 100%;
      box-sizing: border-box;

      position: relative;
      z-index: 0;

      padding-top: 10vh;


      height: 100%;

      border-bottom: 5px ridge  rgba(186, 187, 167, 0.842);;
      

    }
    #home::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: url("/public/images/home-image.jpg");
      background-size: cover;
      background-position: 30% 100%;
      filter: blur(1px) ; /* Apply blur to background image */
      z-index: -1; /* Ensure the blurred background stays behind the content */
    }


    .homeButtons {
      box-sizing: border-box;
      display: flex;
      margin-top: 30px;
      
      font-size: 60%;
      width: 100%;
      justify-content: space-between;
      
      span {
   
         margin: 0 20px;
         padding: 8px 5px;

      }
    }

    .nateContainer {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      grid-row-gap: 20px;
      margin: 0 auto;
      

   }

}