/* FONTS */
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

/* VARIABLES CSS */
:root{
    --header-height:3rem;
    --font-medium:500;
}

/* COLORES CSS */
:root{
    --first-color:#5361FF;
    --white-color:#FAFAFF;
    --dark-color:#2A3B47;
    --text-color:#697477;
}

/* FUENTE Y TIPOGRAFÍA */
:root{
    --body-font:'Montserrat', sans-serif;
    --big-font-size:6.25rem;
    --medium-font-size:3.15rem;
    --h2-font-size:1.25rem;
    --normal-font-size:.938rem;
    --small-font-size:.813rem;
}

.learnings{
    display:flex;
    min-height: 60vh;
    /* height:1200px; */
    align-items: center;
    justify-content:center;
    padding:30px 15px;
    background-color: var(--white-color);

}
.learnings_container{
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    grid-gap:20px;
    max-width:1000px;
    margin:auto;
}
.post-img{
    background: url('../img/blog/scratch.jpeg');
    width:100%;
    height:180px;
    background-size:cover;
    background-position:center;
    transition: .2s;
}
.post-img-2{
    background: url('../img/developer.jpg');
    width:100%;
    height:180px;
    background-size:cover;
    background-position:center;
    transition: .2s;
}


.post{
    box-shadow: 0 1px 6px 1px rgba(134, 100, 100, 0.1);
    /* overflow:hidden; */
    transition: .2s;
    
}
.post:hover{
    transform: translateY(-4px);
    box-shadow: 0 1px 14px 2px rgba(0,0,0,.15);
}
.post-header{
    width:100%;
    height:200px;
    /* overflow: hidden; */
    cursor:pointer;
}
.post:hover .post-img 
.post:hover .post-img-2 {
    transform: scale(1.1);
}
.post-body{
    padding:15px;
    text-align:center;
}
.post-body span{
    display:inline-block;
    color: var(--dark-color);
    margin-bottom: 10px;
}
.post-body h2{
    margin-bottom:15px;
    color: var(--first-color);
}
.post-body p{
    line-height:1.5; 
    margin: bottom 20px;  
}
.post-body .post-link{
    display: block;
    text-decoration: none;
    padding:10px;
    background:var(--first-color);
   color:var(--white-color);
    width: 50%;
    margin:auto;
    border-radius:20px;
    box-shadow: 1px 2px 6px 1px rgba(0,0,0,.1);
    transition:.2s;
}
.post-body .post-link:hover{
    background:var(--first-color);
    box-shadow: 1px 2px 6px 1px rgba(0,0,0,.2);
    transform: translateY(-2px)
}

.post_container{
    max-width:1000px;
    margin: 70px auto;
}
.post_container p{
    color: black;
    font-size: 20px;
    padding: 10px;
}
.post_container h2{
    color: --first-color;
    font-size: 40px;
    text-align: center;
}
.post_container span{
    color: black;
    font-size: 25px;
}

@media (min-width: 1200px){
    .learnings{
        height: 800px;
    }  
}
@media (max-width: 840px){
    .learnings_container{
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px){
    .learnings_container{
        grid-template-columns: repeat(1, 1fr);
    }
  
}