.hero{
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 1rem;
      margin-top: 2rem;
}

.hero__img{
      height: 6rem;
      width: 6rem;
      border-radius: 50%;
}
.hero__subtitle{
      color: var(--clr-slate800);
      font-size: var(--size-base);
      line-height: 0.9;
}
.hero__title{
      color: var(--clr-slate400);
      font-size: var(--size-4xl);
      text-transform: uppercase;
      line-height: 0.9;
}

.hero__description{
      max-width: 60ch;
      font-size: var(--size-sm);
      color: var(--clr-slate600)
}

.hero__button{
      text-transform: capitalize;
      font-size: var(--size-sm);
}

/* xs */
@media (min-width:475px) {
      .hero{
            gap: 1.5rem;
      }
      
      .hero__img{
            height: 6.5rem;
            width: 6.5rem;
      }
      .hero__subtitle{
            font-size: var(--size-lg);
      }
      .hero__title{
            font-size: var(--size-5xl);
      }
      
      .hero__description{
            font-size: var(--size-base);
      }
      
      .hero__button{
            font-size: var(--size-base);
      }
}

/* sm */
@media (min-width:640px) {      
}

/* me */
@media (min-width:768px) {      
}

/* lg */
@media (min-width:1024px) {
      .hero__img{
            height: 8rem;
            width: 8rem;
      }
      .hero__subtitle{
            font-size: var(--size-2xl);
      }
      .hero__title{
            font-size: var(--size-7xl);
      }
      
      .hero__description{
            font-size: var(--size-lg);
      }
      
      .hero__button{
            font-size: var(--size-lg);
      }
}

/* xL */
@media (min-width:1280px) {
      .hero__img{
            height: 10rem;
            width: 10rem;
      }
      .hero__subtitle{
            font-size: var(--size-4xl);
      }
      .hero__title{
            font-size: var(--size-9xl);
      }
      
      .hero__description{
            font-size: var(--size-xl);
      }
      
      .hero__button{
            font-size: var(--size-xl);
      }
}

/* 2xL */
@media (min-width:1536px) {
}