.benfit {
  background-color: var(--l);
  color: var(--d);
  padding: 2rem 0 0 0;

  .box {
    h2 {
      padding-bottom: 1rem;
      font-size: 250%;
      text-align: center;
    }
  }

  .card-box {
    width: 100%;
    height: fit-content;
    .card {
      background-color: var(--l);
      /* width: 250px; */
      min-width: 30%;
      height: 260px;
      color: var(--d);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      padding: 1rem;
      /* border-radius: 10px; */
      /* margin-top: 1rem; */
      /* margin-left: auto;
      margin-right: auto; */

      .bg {
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        
        background-repeat: repeat;
        background-size: 300px 300px;
        opacity: 0.3;
      }

      .rise {
        background-image: url("../imgs/rise.png");
      }

      .pause {
        background-image: url("../imgs/cloud\ pattern.png");
      }

      .reframe {
        background-image: url("../imgs/reframe.png");
      }

      h3 {
        font-size: 250%;
      }

      p {
        text-align: center;
        width: 80%;
      }
    }

    .card:nth-child(1) {
      background-color: var(--p);
    }
    .card:nth-child(2) {
      background-color: var(--y);
    }
    .card:nth-child(3) {
      background-color: var(--b);
    }
  }
}

@media (min-width: 768px) {
  .benfit {
    .card-box {
      display: flex;
    }
  }
}