Help - Organizate your css

Hello, this is my practice for oocss and comments,
Am I complying with the methodology?
What am I missing?
What was wrong?
What should i improve?

Thanks I wait for your answers

HTML:

<div class="container abs-center bdr-dev">

      <div class="card">

        <div class="row">

          <div class="col col-2">

            <img src="https://picsum.photos/id/237/200/300" alt="img-profile" class="img-profile" />

          </div>

          <div class="col col-10">

            <blockquote class="reply relative">

              <h3 class="profile-name">robert molina</h3>

              <p class="paragraph">

                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente saepe in dolores iste magnam magni ullam vitae aperiam, dicta

                corporis molestias ex quo sit! Vel esse cum enim illo eaque?

              </p>

            </blockquote>

          </div>

        </div>

      </div>

    </div>

CSS:

/* || GENERAL STYLES*/

*,

*::before,

*::after {

  margin: 0;

  padding: 0;

  box-sizing: inherit;

}

html {

  font-size: 10px; /*rem's base*/

}

body {

  box-sizing: border-box;

  font-size: 13px;

  font-family: "Open Sans", sans-serif;

}

h1,

h2,

h3,

h4,

h5,

h6 {

  text-transform: uppercase;

  margin-bottom: 1em;

}

/*--------------------------------------*/

/* || UTILITIES*/

/*--------------------------------------*/

/*border for test of box model*/

.bdr-dev {

  border: 1px solid;

}

.relative {

  position: relative;

}

/*vertical and horizontal centered*/

.abs-center {

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

}

.container {

  width: 50%;

}

/*--------------------------------------*/

/* || LAYOUT*/

/*--------------------------------------*/

.row {

  display: flow-root;

}

.col {

  float: left;

}

.col-2 {

  width: calc((100% / 12) * 2);

}

.col-10 {

  width: calc((100% / 12) * 10);

}

/*--------------------------------------*/

/* || CARD REPLY*/

/*--------------------------------------*/

.card {

  width: 100%;

  padding: 0.5em;

}

.img-profile {

  width: 100%;

  max-height: 10rem;

  object-fit: cover;

}

.reply {

  padding: 0 1.5em;

}

/*--------------------------------------*/

/* || TYPOGRAPHY*/

/*--------------------------------------*/

.paragraph:not(:last-child) {

  /*If the paragraph is last  o only-child, it does not get margin bottom*/

  margin-bottom: 1em;

}

Why Nobody help me?

RESULT:

Hello @robertm

hope that everything going fine with you

i am a big fan of your work especially the comment and make the section of your code well organized

well done and have a nice day

Ohh thank you so much.

The oocss methodology is fine?

you very welcome

in my humble opinion yes
i am student also but i like your work

have a nice day

Thank you
Equally good day

you welcome and thanks :slight_smile: