.about{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.about__content{
display: flex;
flex-direction: column;
gap: 1rem;
}

.about__title{
font-size: var(--size-2xl);
color: var( --clr-blood-600);
}

.about__description{
    max-width: 60ch;
    font-size: var(--size-s) ;
    color: var(--clr-lgt);
font-family: 'monospace';
}

.about__hr{
    border-color: var(--clr-ntrl400);
}

.about__subtitle{
    font-size: var(--size-s);
    color: var(--clr-ntrl400);
}

.about__ul-container{
    display: flex;
}

.about__ul {
    display: flex;
    flex-direction: column;
    gap: 1em;
    list-style-type: '\1F44D'; 
    padding-left: 1em;
    flex: 1;
    
}
.about__list{
        font-size: var(--size-base);
        color: var(--clr-ntrl400);
       }

       .about__list::before {
        content: '';
        margin-left: 0.5em;
       }
       
       @media (min-width: 475px){
        .about{
            gap: 1.5rem;
        }
        .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);
               }
        
             
       }

       @media (min-width: 640px) {
  .about__img-wrapper {
    margin: 0 auto;
  }

  .about__img {
    width: 28.6875rem;
  }
}
     
       @media (min-width: 1024px) {
        .about {
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }
        .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);
  }
}
       

       @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;
  }
       }