What’s the best way to get responsiveness from @Media

Question

I was reading/researching how to apply responsiveness to websites for any type of platform and found this post done right here on Stack @Media

That made me open some doubts:

1. Is the content of the link still valid? I really have to create an average for each type of resolution?

2. In order to apply Querie Media correctly I have to
   pass all properties again?

Example:

I have this CSS property

.avatar::after {
    opacity: 0;
    font-family: FontAwesome;
    content: "\f040";
    color: #fff;
    font-size: 2.5rem;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 3px;
    left: 4px;
    width: 144px;
    height: 140px;
    z-index: 2;
    background-color: rgba(0,0,0,0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: 350ms ease-in-out;
}

And if you wanted to apply some average have to do so (obviously changing the values until it is dynamic)

@media only screen and (max-width: 768px){
    .avatar::after {
        opacity: 0;
        font-family: FontAwesome;
        content: "\f040";
        color: #fff;
        font-size: 2.5rem;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 3px;
        left: 4px;
        width: 144px;
        height: 140px;
        z-index: 2;
        background-color: rgba(0,0,0,0.5);
        border-radius: 50%;
        cursor: pointer;
        transition: 350ms ease-in-out;
    }
}

Answer 1

The information is still valid on the link yes, I just find a bit of exaggeration for each difference of 100px for example, make a media query.
See the resolutions of bootstrap for example that are very well defined and accepted: https://getbootstrap.com/docs/3.3/css/

For reference only, if the link is not available one day:

Extra small Devices Phones (<768px)
Small Devices Tablets ( 768px)
Medium Devices Desktops ( 992px)
Large Desktop Computers ( 1200px)

And for the case of columns or grid, already exists the bootstrap and others like the material who already has it.

About the properties, you just need to define what will change in a specific resolution.

For example, imagine that a certain class should have the property display as block, but only in a specific resolution should it be inline-block. In that case, simply overwrite the property once:

div.umaClasse {
   display: block
}

@media screen and (max-width: 1024px) {
    div.umaClasse {
       display: inline-block
    }
}

@media (min-width: 768px) {
  /* aqui não preciso redefinir  div.umaClasse pois não vai mudar */
}