.index .pricing {
  padding: 2rem 0 4rem 0;

  .plans {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 36rem;
    padding: 3rem 0 2rem 0;
    margin: 0 auto;

    .pro {
      grid-column: 2;
      grid-row: 1/3;
      background: var(--s-color);
      border-radius: var(--radius);
      
      .button {
        background: var(--pbtn-bg);
        border-color: var(--pbtn-bg);

        &:hover {
          background: var(--pbtn-hover);
          border-color: var(--pbtn-hover);
        }
      }
    }
  
    .plan {
      padding: 2rem;
      margin: 0;
      
      h3 {
        font-size: 1.75rem;
        font-weight: 600;
        margin: 0;
        text-align: left;
      }
      
      h5 {
        grid-column: 1/3;
        color: var(--fs-color);
        font-size: 1.2rem;
        font-weight: 600;
        margin: 1.25rem 0 0 .05rem;
      }

      hr {
        width: 1rem;
        height: .1rem;
        margin: 1rem 0 1.75rem 0;
        border: none;
        color: var(--s-color);
        background-color: var(--s-color);
      }
  
      .features {
        grid-column: 1/3;
        list-style-type: none;
        white-space:nowrap;
        padding: .25rem 0;
        margin: .5rem 0 1rem 0;
  
        li {
          padding: .5rem .15rem;
  
          span {
            position: relative;
            top: .1rem;
            font-size: 1.1rem;
          }
  
          p {
            display: inline-block;
            font-size: 1.05rem;
            font-weight: 500;
            line-height: 1.25rem;
            padding: 0 .75rem;
            margin: 0;
          }
        }
      }

      .button {
        width: 100%;
        grid-column: 1/3;
      }

      p {
        position: relative;
        font-size: 1rem;
        margin: .5rem 0 0 1.95rem;
        text-align: center;

        span {
          position: absolute;
          color: #f59428;
          font-size: 1.5rem;
          margin: .25rem 0 0 -2rem;
        }
      }
    }
  }
}