:root {
    --accent: #D5966C;
    --heading: #141414;
    --body-text: #444444;
    --background: #FFFFFF;
}

/*---------
    Reset
  ---------*/

  *,
  * ::before,
  * ::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
  }

/*----------------
    Global Styles
  ----------------*/

body {
  background-color: var(--background);
}

/*--------------
    Typography
  --------------*/

h1,
h2,
h3 {
    color: var(--heading);
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
}

h3,
footer,
footer p,
.inspired-text h2, 
.inspired-text p {
    color: var(--background);
}

h1 {
    font-size: 3.75rem;
    line-height: 3.4375rem;
}

h2 {
    font-size: 3.125rem;
    line-height: 2.8125rem;
}

h2 span::before {
    content:"\A";
    white-space: pre;
}

p {
    color: var(--body-text);
    font-family: 'Outfit', sans-serif;
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.75rem;
}

i {
    font-size: 1.25rem;
    margin-right: 1.25rem;
}

/*----------
    Layout
  ----------*/

.section-wrapper {
      margin-left: 1rem;
      margin-right: 1rem;
      max-width: 100%;
}

.section-wrapper img {
    max-width: 100%;
}

/* hero section */
.hero-container {
    margin: 2rem 1rem 7.5rem 1rem;
}

.hero-text {
    margin-top: 2rem;
}

/* Section-1 */
.grid-1 img{
    margin-bottom: 1.5625rem;
}

.section-1 {
    margin-bottom: 2rem;
}

.section-1 .container p{
    margin-top: 1.3125rem;
}

/* 2nd Section */
.grid-2 img,
.grid-3 img {
    margin-bottom: 1rem;
}

.inspired-text,
footer {
    background-color: var(--heading);
}

.inspired-text {  
    margin-bottom: 7.5rem;
    padding: 3rem 1.5rem;
}

.inspired-text p {
    margin-top: 1.5rem;
}

/* Footer */
footer {
    font-size: 1rem;
    line-height: 1.625rem;
    padding: 3rem 2rem;
}

footer p {
    margin-top: 2.375rem;
    margin-bottom: 2.375rem;
}

/*---------------
    Link/Button
  ---------------*/
.arrow, 
.link {
    align-items: center;
    display: flex;
    height: 4.5rem;
}

.arrow {
    background-color: var(--accent);
    justify-content: center;
    width: 3.5rem;
}

.link {
    background-color: var(--heading);
    justify-content: space-between;
    margin-top: 2rem;
    width: 16.25rem;
}

.link a {
    color: var(--background);
    font-family: 'Big Shoulders Display', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 3.64px;
    line-height: 1.49625rem;
    margin-left: 2rem;
    text-decoration: none;
    text-transform: uppercase;
}

.link:hover,
.link:hover .arrow {
    transition: all .3s ease-out;
}

.link:hover {
    background-color: var(--accent);
}

.link:hover .arrow {
    background-color: var(--heading);
}

/* social links */
footer a {
    color: var(--background);
}

footer a:hover {
    color: var(--accent);
}

/*------------------
    Tablet Screens
  ------------------*/
@media screen and (min-width: 768px) {
   /* Typography Tablet*/ 
   h1 {
       font-size: 4.375rem;
       line-height: 4.0625rem;
   }

   h2 {
    font-size: 3.125rem;
    line-height: 2.8125rem;
    }

   h2 span::before {
        display: none;
    }

    .section-1 .container p, 
    .inspired-text p {
        margin-top: 1.5rem;
    }

    /* Layout Tablet*/
    .section-wrapper {
        margin-left: auto;
        margin-right: auto;
        max-width: 43.0625rem;
    }

    section {
        display: flex;
    }

    /* Header Tablet*/
    header {
        display: flex;
        margin-bottom: 7.5rem;
    }

    .hero-container {
        margin-bottom: 0;
        margin-left: -3.125rem;
        margin-top: 9.0625rem;
        max-width: 21.1875rem;
    }

    /* Section-1 Tablet*/
    .section-1 {
        margin-bottom: .6875rem;
    }
    .grid-1 img {
        margin-bottom: 0;
    }

    .grid-1 {
        order: 2;
    }
    
    .container {
        margin-right: 4.25rem;
        max-width: 13.9375rem;
    }

    /* Section-2 Tablet */
    .section-2 {
        margin-bottom: 7.5rem;
    }

    .grid-2 img {
        margin-right: .6875rem;
        width: 24.875rem;
    }

    .grid-3 img{
        margin-bottom: 5px;
    }

    .inspired-text, 
    .grid-2 img{
        margin-bottom: 0;
    }

    .inspired-container {
        width: 17.5rem;
    } 

    .inspired-text {
        padding: 5.25rem 1.8125rem;
    }
    
    /* Footer Tablet */
    .footer-container {
        display: flex;
        justify-content: space-between;
    }

    footer p {
        font-size: 1rem;
        margin: 0;
        max-width: 17.5625rem;
    }
    
    footer {
        padding: 3.5rem 2.4375rem;
    }
}

/*------------------
    Larger Screens
  ------------------*/

  @media screen and (min-width: 1200px){

    /* Typography Large Screens */
    h1 {
        font-size: 6rem;
        line-height: 5.5rem;
    }

    h2 {
        font-size:3.75rem;
        line-height: 3.75rem;
    }

    p {
        font-size: 1.375rem;
        line-height: 2rem;
    }

    /* Layout Large Screens*/
    .section-wrapper {
        max-width: 69.375rem;
    }

    /* Header Large Screens*/
    header {
        position: relative;
    }
    .hero-img {
        padding-left: 28.125rem;
        background-color: var(--heading);
        height: 50rem;
    }
    
    .hero-container {
        display: flex;
        justify-content: space-between;
        margin-left: 11.5%;
        margin-top: 11.8125rem;
        max-width: 69.375rem;
        position: absolute; 
    }

    .hero-container h1 {
        color: var(--background);
        margin-right: 246px;
        mix-blend-mode: difference;
        width: 514px;
    }

    .hero-text {
        margin-top: 0;
        max-width: 350px;
    } 
 
    /* Section-1 Large Screens */
    .section-1,
    .grid-3 img {
        margin-bottom: 1.875rem;
    }

    .container {
        margin-right: 7.8125rem;
        max-width: 21.875rem;
    }

    /* Section-2 Large Screens */
    .grid-2 img {
        margin-right: 1.875rem;
        width: 39.6875rem;
    }

    .inspired-container {
        width: 27.8125rem;
    }

    .inspired-text {
        padding: 4.0625rem 3rem;
    }

    /* Footer Large Screens */
    footer p {
        font-size: 1.125rem;
        max-width: 26.875rem;
    }
   
    footer {
        padding: 5rem 10.3125rem;
    }
  }