Помогите пожалуйста сделать адаптивным css (подскажите что делаю неправильно)

.card {
  border-radius: 1rem;
  width: 50rem;
  height: 25rem;
  background-color: lightblue;

  .card__content_margin {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 92%;
    padding: 1rem;

    .card__col-1 {
      display: flex;
      flex-direction: column;
      width: 17rem;
      height: inherit;
      justify-content: space-between;

      .card__logo{
        background-color: blue;
        height: 7rem;
        border-radius: .5rem;
      }
      .card__picture{
        background-color: blue;
        height: 13rem;
        width: 13rem;
        border-radius: .5rem;
      }
    }

    .card__col-2 {
      padding-left: 1rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: inherit;
      .card__item {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;

        .card__description {
          width: 15rem;
          font-size: 1.4rem;
        }

        .card__info {
          justify-self: center;
          width: 100%;
          font-size: 1.4rem;
        }

        .card__button-wrapper {
          display: flex;
          justify-content: space-between;
          width: 100%;
          align-self: flex-start;
          padding-top: 0.5rem;
          .card__button{
            display: flex;
            justify-content: space-around;
          }
        }
      }
    }
  }
}

<div className='card'>
    <div className='card__content_margin'>
      <div className='card__col-1'>
        <div className='card__logo'>
          <p>logo</p>
        </div>
        <div className='card__picture'>
          <p>picture</p>
        </div>
      </div>
      <div className='card__col-2'>
        <div className='card__item'>
          <h3>Lorem Ipsum Dolor</h3>
          <button>Archive</button>
        </div>
        <div className='card__item'>
          <div className='card__description'>Packages:</div>
          <div className='card__info'>25</div>
        </div>
        <div className='card__item'>
          <div className='card__description'>Parts:</div>
          <div className='card__info'>15000</div>
        </div>
        <div className='card__item'>
          <div className='card__description'>Auction free:</div>
          <div className='card__info'>5</div>
        </div>
        <div className='card__item'>
          <div className='card__description'>Description:</div>
          <div className='card__info'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus</div>
        </div>
        <div className='card__item'>
          <div className='card__description'>Documents:</div>
          <div className='card__button-wrapper'>
            <button>
              <div className='card__button'>
                Download CVS
              </div>
            </button>
            <button>
              <div className='card__button'>
                Term Of Use.pdf
              </div>
            </button>
          </div>
        </div>
      </div>
    </div>

  </div>