.work {
  .box {
    padding-top: 10rem;
    padding-bottom: 2rem;
    h2 {
      font-size: 200%;
      text-align: center;
      padding-bottom: 1rem;
    }

    .rightbar {
      width: 100%;
      background-color: var(--y);
      padding: 2rem;

      img {
        width: 100%;
        height: 100%;
        background-color: var(--d);
        border-radius: 10px;
      }

      div {
        padding: 1rem;
        color: var(--d);

        h3 {
          text-transform: capitalize;
        }
        
        p {
          margin-bottom: 1rem;
        }

        a {
          color: var(--l);
          background-color: var(--d);
          padding: 0.3rem 0.8rem;
          border-radius: 5px;
          text-transform: capitalize;
        }
      }
    }

    .leftbar {
      width: 100%;
      background-color: var(--p);
      padding: 2rem;

      img {
        width: 100%;
        height: 100%;
        background-color: var(--d);
        border-radius: 10px;
      }

      div {
        padding: 1rem;
        width: 100%;
        color: var(--d);

        h3 {
          text-transform: capitalize;
        }
        
        p {
          margin-bottom: 1rem;
        }

        a {
          color: var(--l);
          background-color: var(--d);
          padding: 0.3rem 0.8rem;
          border-radius: 5px;
          text-transform: capitalize;
        }
      }
    }
  }
}

@media (min-width: 768px) {
.work {
  .box {
    .rightbar {
      width: 100%;
      height: 300px;
      margin-left: auto;margin-right: auto;
      display: flex;
      padding: 2rem;

      img {
        width: 350px;
        height: 100%;
        border-radius: 15px;
      }

      div {
        h3 {
          font-size: 200%;
        }

        p {
          font-size: 110%;
        }
      }
    }

    .leftbar {
      width: 100%;
      height: 300px;
      margin-left: auto;margin-right: auto;
      padding: 2rem;
      display: flex;
      justify-content: right;

      img {
        width: 350px;
        height: 100%;
        border-radius: 15px;
      }

      div {
        h3 {
          font-size: 200%;
        }

        p {
          font-size: 110%;
        }
      }
    }
  }
}
}