:root {
    --primary-dark:     #689f38;
    --primary:          #8bc34a;
    --primary-light:    #dcedc8;
    --accent:           #448aff;
    --text-primary:     #212121;
    --text-secondary:   #757575;
    --divider:          #bdbdbd;
    --text-light:       #f7f7f7;
    /* --background-light: #f7f7f7; */
    
    --text-light:                   #fff;
    --text-mid:                     #bdbdbd;
    --text-dark:                    #212121;
    --background-primary-dark:      #689f38;
    --background-primary-mid:       #8bc34a;
    --background-primary-light:     #dcedc8;
    --background-accent-dark:       #448aff;
    --border-light:                 #fff;
    --border-dark:                  #212121;
    --border-primary-mid:           #8bc34a;
  }
  
  /* ----- Elements ----- */
  
  body {
    background-color: var(--background-light);
    color: var(--text-light);
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 16px;
    margin: 0;
  }
  
  h1,
  h2,
  h3,
  h4,
  p {
      margin: 0 0 10px;
  }
  
  a {
    color: var(--text-light);
  }
  
  a:hover {
    color: var(--text-mid);
  }
  
  nav ul,
  footer ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
  }
  
  ul {
      margin-top: 0;
  }
  
  /* ----- Sections ----- */
  
  .container {
    margin: 0 auto;
    max-width: 1200px;
    padding: 0 20px;
  }
  
  
  .Intro {
    background-color: var(--background-primary-dark);
    padding: 12px 0 24px;
  }
  
  .Stewardship {
    background-color: var(--background-primary-mid);
    padding: 12px 0 24px;
  }
  
  .Writing {
    background-color: var(--background-primary-light);
    color: var(--text-dark);
    padding: 12px 0 24px;
  }
  
  .Footer {
    background-color: var(--background-accent-dark);
    padding: 12px 0 24px;
  }
  
  .Hero {
    display: flex;
    flex-direction: column;
    margin-bottom: 80px;

    @media screen and (min-width: 1000px) {
      flex-direction: row;
    }
  }
  
  .Hero-decoration {
    margin-bottom: 40px;
    position: relative;

    @media screen and (min-width: 1000px) {
      max-height: 420px;
    }
  }
  
  .Hero-racing-stripe {
    border-top: 30px solid #fff;
    border-bottom: 4px solid #fff;
    height: 2px;
    left: -5px;
    position: absolute;
    transform: translateY(8px) rotate(-3deg);
    bottom: -3px;
    width: 103%;

    @media screen and (min-width: 600px) {
      bottom: -11px;
      width: 440px;
    }
  }
  
  .Hero-image {
    max-width: 100%;

    @media screen and (min-width: 600px) {
      height: 417px;
      margin-right: 80px;
      max-width: initial;
      width: 417px;
    }
  }
  
  .Hero-h1 {
    font-size: 48px;
    font-weight: 700;
    margin: 0 0 60px;
    text-align: center;

    @media screen and (min-width: 600px) {
      text-align: left;
    }
  }
  
  .Hero-h2 {
    font-size: 30px;
    font-weight: 400;

    @media screen and (min-width: 400px) {
      font-size: 50px;
    }

    @media screen and (min-width: 600px) {
      font-size: 70px;
    }
  }
  
  .Content-h2 {
    font-size: 36px;
    margin: 0;
    font-weight: 400;
  }
  
  .Content-h3 {
    font-size: 48px;
    font-weight: 400;
    margin: 0 auto 54px;
    max-width: 767px;
    text-align: center;
  }
  
  .Divider {
    border-top: 2px solid var(--border-light);
    border-right: 0;
    border-bottom: 1px solid var(--border-light);
    border-left: 0;
    height: 1px;
    margin: 0 0 54px;
  }
  
  .Divider--dark {
    border-color: var(--border-dark);
  }
  
  /* ----- Appearance Component ----- */
  
  .Appearance {
    margin: 0 0 60px;
  }
  
  .Appearance-content {
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;

    @media screen and (min-width: 600px) {
      flex-direction: row;
    }
  }
  
  .Appearance-meta,
  .Appearance p {
    flex: 1 1 auto;
  }

  .Appearance-img {
    display: block;
    margin: 0 auto;
    min-height: 200px;
    max-width: 100%;

    @media screen and (min-width: 600px) {
      max-width: 560px;
    }
  }
  
  .Appearance-asset {
    display: block;
    margin: 0 auto;
    min-height: 200px;
    width: 100%;

    @media screen and (min-width: 600px) {
      height: 315px; 
      width: 560px; 
    }
  }
  
  .Appearance p {
    max-width: 532px;
  }
  
  /* ----- Work Card Component ----- */
  
  .WorkList {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    margin: 0 auto 54px;
  }
  
  .WorkCard {
    background-color: var(--background-primary-mid);
    border-radius: 0 6px;
    box-shadow: 4px 4px 0 0 #fff;
    display: flex;
    font-size: 14px;
    padding: 24px;
    width: 374px;
  }
  
  .WorkCard-h3 {
    font-size: 16px;
    font-weight: bold;
  }
  
  .WorkCard-image {
    border: 1px solid var(--border-primary-mid);
    box-shadow: 0 0 0 1px#fff;
    height: 132px;
    margin: 0 0 0 12px;
    order: 2;
    width: 132px;
  }
  
  /* ----- Quote Component ----- */
  
  .QuoteList {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 74px;
    padding: 50px 0;
  }
  
  .Quote {
    display: flex;
    flex-direction: column;
    margin-bottom: 40px;
    max-width: 746px;

    @media screen and (min-width: 600px) {
      flex-direction: row;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .Quote-image {
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--border-primary-mid), 0 0 0 3px #fff;
    height: 132px;
    margin-right: 24px;
    position: relative;
    width: 132px;
    z-index: 2;
  }
  
  .Quote-decoration {
    position: relative;
  }
  
  .Quote-decoration::after {
    background: url("../assets/img/quote.png") center/contain no-repeat;
    content: "";
    height: 122px;
    width: 109px;
    left: 50px;
    position: absolute;
    top: -65px;
    z-index: 0;
  }
  
  .Quote--image-right {
    @media screen and (min-width: 600px) {
      .Quote-decoration {
        margin: 0 0 0 24px;
        order: 2;
      } 
    }
  }
  
  .Quote-text {
    font-size: 24px;
    font-style: italic;
  }
  
  .Quote-source {
    font-size: 20px;
    font-weight: 700;
  }
  
  /* ----- Blog Card Component ----- */
  
  .BlogPostList {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 0 auto 54px;
  }
  
  .BlogPostHighlight {
    background-color: var(--background-primary-dark);
    border-radius: 0 6px;
    box-shadow: 4px 4px 0 0 #fff;
    color: var(--text-light);
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 746px;
    padding: 24px;

    @media screen and (min-width: 600px) {
      flex-direction: row;
    }
  }
  
  .BlogPostHighlight-title {
    margin-bottom: 6px;
  }
  
  .BlogPostHighlight-pubDate {
    display: inline-block;
    font-size: 14px;
    margin-bottom: 12px;
  }
  
  .BlogPostHighlight-image {
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--border-primary-mid), 0 0 0 3px #fff;
    height: 132px;
    width: 132px;

    @media screen and (min-width: 600px) {
      order: 2;
    }
  }
  
  .Image-highlight {
    border: 2px solid #fff;
    display: block;
    margin: 0 auto 44px;
    width: 240px;
  }

  .Image-highlight--large {
    border: 4px solid var(--border-primary-mid);
    border-radius: 0 6px;
    display: block;
    margin: 0 auto 44px;
    max-width: 98%;

    @media screen and (min-width: 400px) {
      max-width: 360px;
    }
  }

  /* ----- Footer ----- */

  .Footer .Divider {
    margin-bottom: 20px;
  }

  .NavSecondary-item {
    margin-bottom: 5px;
  }