.about {
      display: flex;
      flex-direction:column ;
      gap:1em;
}
.about__content{
      display: flex;
      flex-direction: column;
      gap:1rem;
}
.about__title{
      font-size: var(--size-2xl);
}

.about__description{
      max-width: 60ch;
      font-size: var(--size-sm);
      color: var(--clr-slate600);
}
.about__subtitle{
      font-size: var(--size-sm);
}
.about__hr{
      border-color: var(--clr-slate600);
}

.about__ul-container{
      display: flex;
}

.about__ul{
      display: flex;
      flex:1;
      flex-direction: column;
      gap: 1em;
      padding-left: 1em;
}
.about__list{
      font-size: var(--size-sm);
      color: var(--clr-slate600)
}

/* xs */
@media (min-width:475px) {
      .about {
            gap:1.5em;
      }
      .about__content{
            gap:1.5rem;
      }
      .about__title{
            font-size: var(--size-3xl);   
      }
      
      .about__description{
            font-size: var(--size-base);
      }
      .about__subtitle{
            font-size: var(--size-base);
      }
      .about__list{
            font-size: var(--size-base);
      }
}

/* sm */
@media (min-width:640px) {  
      .about__img-wrapper{
            margin: 0 auto;
      }
      .about__img{
            width: 28.6875rem;
      }    
}

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

/* lg */
@media (min-width:1024px) {
      .about{
            flex-direction:row ;
      }
      .about__title{
            font-size: var(--size-4xl);
      }
      
      .about__description{
            font-size: var(--size-lg);
      }
      .about__subtitle{
            font-size: var(--size-lg);
      }
      .about__list{
            font-size: var(--size-lg);
      }
}

/* xL */
@media (min-width:1280px) {
      .about__content{
            gap: 2rem;
      }
      .about__title{
            font-size: var(--size-5xl);
      }
      
      .about__description{
            font-size: var(--size-xl);
      }
      .about__subtitle{
            font-size: var(--size-xl);
      }
      .about__list{
            font-size: var(--size-xl);
      }
      .about__img{
            width: 30.75rem;
      }
}

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