#body
{
  section
  {
    header
    {

      h1
      {
        font-size: 36px;
        line-height: 52px; /* 144.444% */
        letter-spacing: 0.72px;
        margin-bottom: 24px;
      }
      p
      {
        padding-bottom:80px;
        border-bottom:1px solid $text-color;
        max-width: 720px;
      }
    }
    .step-list
    {
      padding-top:100px;
      .step
      {
        text-align: center;
        margin-bottom:20px;
        span
        {
          
          margin-bottom:16px;
        }
        >div
        {
          background-color: #FFCD2A;
          border-radius: 8px;
          padding:24px;
          display: flex;
          flex-direction:column;
          justify-content:center;
          h2
          {
            font-size: 18px;
            font-weight: 700;
            line-height: 26px; /* 144.444% */
            letter-spacing: 0.36px;
//            margin-bottom:8px;
          }
          &:has(p)
          {
            background-color: #fff;

            h2
            {
              margin-bottom: 8px;
            }
          }
          
        }
      }
      @media(min-width:768px)
      {
        display: flex;
        flex-wrap:wrap;
        .step
        {
          display: flex;
          flex-direction:column;
          >div
          {
            flex:1;
          }

        }
      }
      @media(min-width:768px) and (max-width:979px)
      {
        .step
        {
          width: calc(50% - 20px);
          margin:0 20px 40px 20px;
          
          &:nth-child(2n)
          {
            margin-right: 0;
          }
          
          &:nth-child(2n + 1)
          {
            margin-left: 0;
          }
        }
      }
      @media(min-width:980px)
      {
        .step
        {
          width: calc((100% - 160px) / 4);
          margin:0 20px 40px 20px;
          &:nth-child(4n)
          {
            margin-right: 0;
          }
          &:nth-child(4n + 1)
          {
            margin-left: 0;
          }
        }
      }
      @media(min-width:768px)
      {
        .step
        {
          position: relative;
          svg
          {
            position: absolute;
            bottom:calc(50% - 30px);
            right:-30px;
          }
          &:last-child
          {
            svg
            {
              display: none;
            }
          }
        }
      }
      @media(max-width:767px)
      {
        .step
        {
          svg
          {
            display: none;
          }
        }
      }

    }
    
    .article-list
    {
      padding-left:24px;
      padding-right:24px;
      article
      {
        margin-bottom:24px;
        position: relative;
        picture
        {
          position: absolute;
          top:0;
          left:0;
          width: 100%;
          height: 100%;
          display: block;
          img
          {
            border-radius: 10px;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
          }
          
        }
        >div
        {
          max-width: 608px;
          padding-left:24px;
          padding-right:24px;
          margin:0 auto;
          color:#fff;
          position: relative;
          z-index: 1;
          h2
          {
            margin-bottom:24px;
            a
            {
              color: #FFF;
              font-size: 24px;
              line-height: 35px; /* 145.833% */
              letter-spacing: 0.48px;
            }
          }
          p
          {
            margin-bottom:56px;
          }
          .more
          {
            display: flex;
            a
            {
              padding:8px 28px;
              color:#fff;
              border:1px solid #fff;
              border-radius: 100px;
              transition:0.5s;
              &:hover
              {
                background-color: #fff;
                color:$text-color;
              }
            }
          }
        }
      }
    }
    @media(min-width:768px)
    {
      header
      {
        padding-top:80px;
        padding-bottom:80px;
      }
      .article-list
      {
        article
        {
          padding-top:160px;
          padding-bottom:160px;
        }
      }
    }
    @media(max-width:767px)
    {
      header
      {
        padding-top:40px;
        padding-bottom:40px;
        h1
        {
          font-size: 30px;
          line-height: 43px; /* 143.333% */
          letter-spacing: 0.6px;
          margin-bottom: 24px;
        }
        p
        {
          margin-bottom: 24px;;
        }
      }
      .article-list
      {
        article
        {
          padding-top:80px;
          padding-bottom:80px;
        }
      }
    }
  }
}