.intro {
  margin: 0 auto;
  padding: 6.4rem 2rem;
  width: 36rem;
  @media (width >= 961px) {
    padding: 9rem 2rem;
    width: 96rem;
  }

  p {
    font-size: 2.2rem;
    line-height: 1.8;
    margin: 0 0 2.4rem;
    padding: 0;
    @media (width >= 961px) {
      font-size: 2.4rem;
    }
    span {
      background: #E6E61F;
      padding: 0 .5rem;
      &:nth-of-type(2) {
        padding: 0 .5rem 0 0;
      }
    }
  }
}

.sub-header {
  h2 {
    font-size: 2rem;
    padding: 0 0 0 2rem;
    white-space: nowrap;
    @media (width >= 961px) {
      font-size: 3rem;
      padding: 0 0 0 2.4rem;
    }
  }
}

.taxonomy-dropdown {
  margin: 0 auto;
  padding: 0 2rem 6.4rem;
  width: 36rem;
  text-align: center;
  @media (width >= 961px) {
    display: none;
  }
  
  label {
    display: block;
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0 .4rem;
    text-align: left;
  }

  select {
    appearance: none;
    -webkit-appearance: none;
    border: .1rem solid #ccc;
    border-radius: .6rem;
    font-size: 1.6rem;
    padding: 0.6em;
    width: 100%;
  }
}

.list {
  margin: 0 auto;
  padding: 0 2rem 6.4rem;
  width: 36rem;
  @media (width >= 961px) {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    padding: 0 2rem 9rem;
    width: 96rem;
  }

  > div {
    @media (width >= 961px) {
      width: 67rem;
    }
    article {
      border: 0;
      margin: 0 0 2.7rem;
      @media (width >= 961px) {
        margin: 0 0 2.4rem;
      }
      &:last-of-type {
        margin: 0;
      }
    
      a {
        color: #1a1a1a;
        display: block;
        text-decoration: none;
        @media (width >= 961px) {
          align-items: center;
          color: #1a1a1a;
          display: flex;
          justify-content: space-between;
          text-decoration: none;
          width: 100%;
        }
        &:hover {
          opacity: .7;
        }

        img {
          border-radius: 1.6rem;
          height: 22.3rem;
          margin: 0 0 2rem;
          object-fit: cover;
          width: 100%;
          @media (width >= 961px) {
            height: 19.9rem;
            margin: 0;
            width: 29.9rem;
          }
        }

        div {
          display: block;
          padding: 0;
          @media (width >= 961px) {
            width: 36rem;
          }
        
          h2 {
            font-size: 1.8rem;
            line-height: 1.6;
            margin: .58rem 0 2.8rem;
            padding: 0;
            position: relative;
            @media (width >= 961px) {
              font-size: 1.8rem;
              line-height: 1.6;
              margin: .58rem 0 2.8rem;
              padding: 0;
              position: relative;
            }

            &::after {
              background: #E6E61F;
              content: "";
              bottom: -1.4rem;
              display: block;
              height: .2rem;
              left: 0;
              position: absolute;
              width: 4.2rem;
            }
          }

          p {
            font-size: 1.6rem;
            font-weight: 400;
            margin: 0;
            padding: 0;
          }
        }
      }
    }

    > p {
      font-size: 1.6rem;
      line-height: 1.8;
      margin: 0;
    }
  }

  aside {
    display: none;
    @media (width >= 961px) {
      background: #F9F9F9;
      border-radius: 1.6rem;
      display: block;
      padding: 3rem 3rem;
      width: 21rem;
      
      h3 {
        font-size: 1.8rem;
        line-height: 1.8;
        margin: 0 0 1rem;
        position: relative;

        &::before {
          background: #E6E61F;
          content: "";
          display: block;
          height: .2rem;
          left: -3rem;
          position: absolute;
          top: 51%;
          transform: translateY(-50%);
          width: 1.8rem;
        }
      }

      ul {
        list-style: none;
        margin: 0;
        padding: 0;
        li {
          border-bottom: .1rem solid #C6C6C6;
          font-size: 1.6rem;
          line-height: 3;

          a {
            color: #1a1a1a;
            display: block;
            text-decoration: none;
            &:hover {
              opacity: .7;
            }
          }
        }
      }
    }
  }
}

#main-area {
  margin: 0 auto;
  padding: 6.4rem 2rem;
  width: 36rem;
  @media (width >= 961px) {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 5rem;
    padding: 9rem 2rem;
    width: 96rem;
  }

  > img {
    border-radius: 1.6rem;
    height: 22.3rem;
    margin: 0 0 .5rem;
    object-fit: cover;
    width: 100%;
    @media (width >= 961px) {
      height: 27.9rem;
      margin: 0;
      width: 40rem;
    }
  }

  > div {
    @media (width >= 961px) {
      width: 47rem;
    }

    h2 {
      font-size: 2rem;
      line-height: 1.8;
      margin: 0 0 1rem;
      padding: 0;
      @media (width >= 961px) {
        font-size: 2.6rem;
      }
    }
    
    > p {
      font-size: 1.6rem;
      line-height: 1.8;
      margin: 0 0 3.2rem;
    }

    > div {
      background: #F9F9F9;
      border-radius: 1.6rem;
      padding: 3rem;
      width: 100%;
      
      h3 {
        color: #1a1a1a;
        font-size: 1.8rem;
        margin: 0 0 2rem;
        position: relative;
        &::before {
          background: #E6E61F;
          content: "";
          display: block;
          height: .2rem;
          left: -3rem;
          position: absolute;
          top: 51%;
          transform: translateY(-50%);
          width: 1.8rem;
        }
      }
      
      ul {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
        
        li  {
          a {
            border-radius: 2rem;
            background: #DDDDD3;
            color: #1a1a1a;
            display: inline-block;
            font-size: 1.4rem;
            height: 4rem;
            line-height: 4rem;
            padding: 0 2.4rem;
            text-decoration: none;
            transition: .5s;
            white-space: nowrap;
            width: auto;
            
            :hover {
              background: #e6e61f;
            }
          }
        }
      }
    }
  }
  > p {
    font-size: 1.6rem;
    line-height: 1.8;
    margin: 0;
    width: 100%;
  }
}


    .story {
      font-size: 1.6rem;
      line-height: 1.8;
      margin: 0;
      @media (width >= 961px) {
        font-size: 1.8rem;
      }
    }