.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;
      }
    }
  }
}

.bt-area {
  display: flex;
  gap: .8rem;
  margin: 0 auto;
  padding: 0 2rem 6.4rem;
  width: 36rem;
  @media (width >= 961px) {
    gap: 2rem;
    padding: 0 2rem 3.2rem;
    width: 96rem;
  }

  p, a {
    background: #E6E61F;
    border: .3rem solid #E6E61F;
    border-radius: 1.6rem 1.6rem 0 0;
    color: #1a1a1a;
    display: block;
    font-size: 1.8rem;
    height: 5.4rem;
    line-height: 4.8rem;
    margin: 0;
    text-align: center;
    text-decoration: none;
    width: 15.6rem;
    @media (width >= 961px) {
      height: 6.5rem;
      line-height: 5.9rem;
      width: 45rem;
    }
  }
  a {
    background: #fff;
    transition: .5s;

    &:hover {
      border-color: #5F5F5F;
    }
  }
}

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

  article {
    border: 0;
    margin: 0 0 2.7rem;
    @media (width >= 961px) {
      margin: 0;
      width: calc(100% / 3 - 1.6rem);
    }
    &:last-of-type {
      margin: 0;
    }

    >a {
      color: #1a1a1a;
      display: block;
      text-decoration: none;
      
      img {
        border-radius: 1.6rem;
        height: 22.3rem;
        margin: 0 0 1rem;
        object-fit: cover;
        width: 100%;
        @media (width >= 961px) {
          height: 19.8rem;
        }
      }
      h2 {
        font-size: 1.9rem;
        line-height: 1.6;
        margin: 0;
        padding: 0;
      }
      p {
        font-size: 1.8rem;
        line-height: 1.6;
        margin: 0;
        padding: 0;
        span {
          &:first-of-type {
            color: #A29C20;
          }
          &:nth-of-type(2) {
            font-weight: 700;
          }
        }
      }
    }
  }
}

#main-area {
  margin: 0 auto;
  padding: 6.4rem 2rem;
  width: 36rem;
  @media (width >= 961px) {
    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: 64.1rem;
    }
  }

  > div {

    .date {
      color: #5F5F5F;
      font-size: 1.4rem;
      line-height: 1.8;
      margin: 0 0 1rem;
      text-align: right;
      @media (width >= 961px) {
        font-size: 1.6rem;
      }
    }

    h1 {
      font-size: 2rem;
      line-height: 1.8;
      margin: 0 0 .4rem;
      padding: 0;
      @media (width >= 961px) {
        font-size: 2.6rem;
      }
    }

    .price {
      font-size: 2.4rem;
      line-height: 1.6;
      margin: 0 0 2rem;
      padding: 0;
      @media (width >= 961px) {
        font-size: 3.2rem;
        margin: 0 0 3.2rem;
      }
      span {
        &:first-of-type {
          color: #A29C20;
        }
        &:nth-of-type(2) {
          font-weight: 700;
        }
      }
    }

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