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

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

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

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

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

.about__subtitle {
    font-size: var(--size-sm);
    color: var(--clr-header);
}

.about__skill__list-container {
    display: flex;
}

.about__skill__list {
    display: flex;
    flex-direction: column;
    gap: 1em;
    list-style: '\2744';
    padding-left: 1em;
    flex: 1;
}

.about__skill {
    font-size: var(--size-sm);
    color: var(--clr-text);
}

.about__skill::before {
    content: '';
    margin-left: 0.5em;
}


/* 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__skill {
        font-size: var(--size-base);
    }
}

/* sm */
@media (min-width: 640px) {
    .about__img-wrapper {
        margin: 0 auto;
    }
    
    .about__img {
        width: 28.675rem;
    } /* stop the about image from automatically resizing */
}

/* md */
/* @media (min-width: 768px)*/

/* lg */
@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__skill {
        font-size: var(--size-lg);
    }

    .about__img {
        width: 40rem;
    }
}

/* 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__skill {
        font-size: var(--size-xl);
    }

    .about__img {
        width: 45rem;
    }
}

/* 2xl */
@media (min-width: 1536px) {
    .about__img {
        width: 50rem;
    }
}