@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



:root{
    /* Primary */
   --Red: hsl(0, 78%, 62%);
   --Cyan: hsl(180, 62%, 55%);
   --Orange: hsl(34, 97%, 64%);
   --Blue: hsl(212, 86%, 64%);

 /* Neutral*/

   --V-D-Blue: hsl(234, 12%, 34%);
   --Grayish-Blue: hsl(229, 6%, 66%);
   --V-L-Gray: hsl(0, 0%, 98%);

   --font-size:15px;
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 15px;
}
body{
    display: flex;
    flex-wrap: wrap;
    min-height: 100vh;
    font-family: "Poppins", serif;
    background-color: var(--V-L-Gray);

}

footer{
    align-self: flex-end;
    text-align: center;
    width: 100%;
    color: var(--Grayish-Blue);
    


}

.attribution{
    font-size: clamp(0.75rem, 0.05rem + 3.5vw, 1rem);
}

a{
    text-decoration: none;
    color: var(--Grayish-Blue);
    font-size: clamp(0.75rem, 0.05rem + 3.5vw, 1rem);
}


.container{
    margin: 0 auto;
    width: 80%;

    
}

.intro{
    
    text-align: center;
    margin-top: 5rem;
    color: var(--Grayish-Blue);

}

.intro .normal, .negrita{
    font-size: clamp(0.75rem, -1.5rem + 11.25vw, 1.875rem);
    color: var(--V-D-Blue);
}

.intro .normal{
    font-weight: 200;
}
.intro .negrita{
    font-weight: 600;
    
}
.intro .texto{
    font-size: clamp(0.75rem, -0.35rem + 5vw, 1.3rem);
    margin-top: 1.4rem;
   

    
}
.cards{
    margin-top: 6rem;
    display: grid;
    gap: 2.5rem;
    grid-template-columns: 1fr;
}

.cards li{
    list-style: none;
    background-color: white;
    padding: 1.4rem;
    border-radius: 0.5rem;
   
    display:flex ;
    flex-direction: column;
    box-shadow: 0px 0.625rem 1.25rem -0.5rem var(--Grayish-Blue);
    


}

.card:hover{
    transform: scale(0.95);

}

.cards li p{
    font-size: clamp(0.75rem, 0.05rem + 3.5vw, 1.1rem);
    color: var(--Grayish-Blue);
    padding : 0 0 0 1.25rem;

}
.cards li .title{
    color: var(--V-D-Blue);
    font-weight: 600;
    font-size: clamp(0.75rem, -1.35rem + 10.5vw, 1.8rem);
    line-height: 2.5;

}


.cards .card1{
    border-top: 0.3125rem solid var(--Cyan) ;

}

.card:nth-child(2){
    border-top: 0.3125rem solid var(--Red);
  
}
.card:nth-child(3){
    border-top: 0.3125rem solid var(--Orange);
    
}

.card:nth-child(4){
    border-top: 0.3125rem solid var(--Blue);
    
}



.card1 img, .card2 img, .card3 img, .card4 img{
    align-self: flex-end;
    width: 23%;
    margin-bottom: 0.7rem;
    margin-right: 1.5625rem


}

.card .description{
    margin-bottom: 3.125rem;

}


@media screen and (min-width:768px){
    .cards{
        margin-top: 6rem;
        display: grid;
        gap: 2.5rem;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 500px;
        gap:20px;
      
    }

    .card .description{
        padding-right: 30px;
        padding-left: 10px;

    
    }

    .card  .title{
        padding-right: 30px;
        padding-left: 10px;

    
    }


  
    
    
    .intro .normal, .negrita{
    font-size: clamp(1.125rem, -0.1036rem + 2.5595vw, 2.2rem);
    color: var(--V-D-Blue);
    }


    .intro .texto{
    font-size: 18px;
    margin-top: 1.4rem;
    text-align: center;
    padding: 0 17.5rem;
   
   

    
    }


    .cards li{
        height: 235px;

    }

    .cards li p{
    font-size: clamp(0.71875rem, 0.3973rem + 0.6696vw, 1rem);

    }
    .cards li .title{
    color: var(--V-D-Blue);
    font-size: clamp(0.75rem, 0.2357rem + 1.0714vw, 1.2rem);
   

    }



    .card1 img, .card2 img, .card3 img, .card4 img{
    align-self: flex-end;
    width: 18%;
    margin-top: 40px;
    margin-right:15px;


    }

/* new */
    .cards .card1{
        grid-column: 1;
        grid-row: 1;
        align-self: center;
    }

    .cards .card2{
        grid-column: 2;
        grid-row: 1;
        align-self: flex-start;
       
    }

    .cards .card3{
        grid-column: 2;
        grid-row: 1;
        align-self: flex-end;
       
       
    }

    .cards .card4{
        grid-column: 3;
        grid-row: 1;
        align-self: center;
    }
    .card .description{
        margin-bottom: 0;
    
    }


@media  screen and (min-width:768px) and (max-width:1324px){

    

    .intro .texto{
        padding: 0 4rem;
    
        
        }
    
    
}



}