@import url("./styles.css");

/* ======== process ======== */
.process__data{
    text-align: center;
}

.process_description span{
    /* font-size: var(--h2-font-size); */
    color: var(--first-color);
  
}

.process__tool{
    font-size: var(--h3-font-size);
    color: var(--first-color);
    display: block;
}

.process__tool-def{
    color: var(--black);
}

.process__image{
    justify-self: center;
    width: 350px;
    border-radius: 0.5rem;
    margin: auto;
}


/* --------- MEDIA QUERIES --------- */
@media screen and (min-width: 576px){
    .process__container
    {
        grid-template-columns: repeat(2,1fr);
    }
    
    .process__description{
        text-align: start;
        font-weight: var(--font-light);
    }
    
    .process__tool{
        font-size: var(--small-font-size);
    }
    
    .process__tool-def{
        font-size: var(--small-font-size);
    }
    
}

@media screen and (min-width: 768px){
    .process__description{
        text-align: start;
        font-weight: var(--font-light);
    }
    
    .process__data{
        text-align: start;
    }

    .process__img{
        width: 300px;
        margin: auto;
    }

}