Profile card component

Hello there EHO, You did an amazing job on the challenge!

Though I have some suggestions for you.

1. on your card element switch the width property to max-width like this.

.card {
   background-color: white;
   height: 374px;
   max-width: 350px;  /* Like this */
   box-shadow: 0px 50px 100px -20px rgba(8, 70, 94, 0.504835);
   border-radius: 15px;
   overflow: hidden;
}

1. on your main element remove the flex-direction property because you don't need it.

.main {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;  /* Remove this */
   min-height: 100vh;
   background-color: $dark-cyan;
   background-image: url("../../public/images/bg-pattern-top.svg"), url("../../public/images/bg- 
   pattern-bottom.svg");
   background-repeat: no-repeat, no-repeat;

   background-position: top -150px left -200px, bottom -150px right -200px;
   background-size: 80%, 80%;
   @media (min-width: 992px) {
    background-position: top -400px left -400px, bottom -400px right -400px;
    background-size: 65%, 65%;
  }
}

1. On your banner image set the width property to 100% instead of 350px.

  &__banner {
    height: 140px;
    width: 100%; /* Like this */
    background-image: url("../../public/images/bg-pattern-card.svg");
  }

Ok, that's all I have to say, I hope this helps and Happy coding.