Grid, flex, mobiler first

Nice well done. There is an issue when going to mobile the circle is no longer a circle. On desktop is fine on mobile not. This problem is caused by margin conflict. Here is how you can fix this

.component__top {
  background: linear-gradient(var(--gradient1), var(--gradient2));
  border-radius: 0 0 40px 40px;
  display: flex;
  align-items: center;
  align-items: center;
  flex-direction: column;
  padding-top: 1rem; /* add this line */
}

.component__top__title {
  color: var(--Light-lavender);
/*   margin-block: 1.6rem 1.5rem; */ /* remove this line */
  font-weight: 500;
  margin-bottom: 15px; /* add this line */
}

.component__top__content {
  width: 80%;
  color: var(--Light-lavender);
  text-align: center;
/*   margin-bottom: 2.7rem; */ /* remove this line */
}