How to fix responsiveness? When I reduce the pages, I put it to reduce the letters, but it was not good, and the image was also terrible.

[impts]

Another thing I'd like to ask, can I clean up my code and make it smarter and simpler? (I'm new to html/css, so I'd like to hear from someone more experienced).

html

<section class="content-product-1">
  <div class="content">
    <div class="content-item item-1">
      <span class="text-gradient-blue-gray-gray-red-red">Lorem Ipsum Lorem Ipsum.</span>
    </div>
    <div class="content-item item-2">
      <span class="text-subtitle-black">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
    </div>
    <div class="content-item item-3">
      <a href="">Info ></a>
      <a href="">Buy >/a>
    </div>
    <div class="content-item item-4">
      <img src="https://visualstudio.microsoft.com/wp-content/uploads/2021/10/Share-more-than-screens.png">
    </div>
  </div>
</section>

css

.content-product-1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.content {
    max-width: 800px;
}

.content .item-3 {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 2rem;
}

.content .item-4 img {
    max-width:800px;

}

.content-item {
    text-align: center;
    margin-top: 1rem;
}

.content-item a {
    text-decoration: none;
    color: deepskyblue;
    font-size: 14px;
}

.content-item a:hover {
    text-decoration: underline;

}
.text-gradient-blue-gray-gray-red-red {
    display: block;
    background-image: linear-gradient(90deg,#038ff4 25%,#3d4e59 42%,#3d4e59 57%,#ad003a 75%,#ad003a);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 48px;
    font-weight: 600;
    line-height: unset!important;
    -webkit-transition: font-size .3s ease;
    -moz-transition: font-size .3s ease;
    -o-transition: font-size .3s ease;
    transition: font-size .3s ease;
}

.text-subtitle-black {
    font-size: 18px;

}


@media (max-width: 800px) {

.text-gradient-blue-gray-gray-red-red {
  font-size: 32px;

}

.text-subtitle-black {
    font-size: 14px;
}

.content-item a {
    text-decoration: none;
    color: deepskyblue;
    font-size: 12px;
}

    }

 

[dsonesuk]

responsive text can be done similar to

font-size: calc(20px + .5vw);

the 20px will be minimum size, while .5vw will be to max size.

If .content is max width: 800px; why have img element the same?

use 

img {
max-width: 100%;
height: auto;
}

is the norm, the img will fill total width and not extent beyond 800px because its parent .content is prevented from doing that! height: auto; will make image expand proportionately by height.

[impts]

1 hour ago, dsonesuk said:

responsive text can be done similar to

font-size: calc(20px + .5vw);

the 20px will be minimum size, while .5vw will be to max size.

If .content is max width: 800px; why have img element the same?

use 

img {
max-width: 100%;
height: auto;
}

is the norm, the img will fill total width and not extent beyond 800px because its parent .content is prevented from doing that! height: auto; will make image expand proportionately by height.

Thank you, it helped! But what do you think of my html and css, is it good? Can you improve on something?