.main{
    display: flex;
    flex-flow: column;
    gap: var(--space-l);
}
.main__content{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xxl);
}
.card{
    position: relative;
    min-height: 17.5rem;
    transition: all 250ms ease-out;
}
.card--buddy{
    display: flex;
    flex-flow: column;
    min-height: 20rem;
    height: 20rem;
    border-radius: var(--br-default);
    overflow: hidden;
    /* border: 1px solid white; */
}
/* .buddy__body{
    display: grid;
    align-items: center;
    grid-template-columns: 3.5fr 6.5fr;
    gap: var(--space-l);
    padding: var(--space-l);
    height: 80%;
    background-color: var(--primary-50);
} */
.buddy__body{
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: var(--space-l);
    padding: var(--space-l);
    height: 80%;
    background-color: var(--primary-50);
}
.profile-img-wrapper{
    position: relative;
    width: 35%;
}
.profile-img{
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid var(--primary-500);
}
/* profile info */
.profile-info{
    height: 100%;
}
.profile-name{
    font-size: 2.75rem;
}
.profile-hashtag{
    font-weight: bold;
    margin-bottom: var(--space-l);
}
.profile-achievements{
    display: flex;
    gap: var(--space-l);
}
.barrita{border: 1px solid var(--primary-500);}
.buddy__footer-external-layer{
    position: relative;
    width: 100%;
    height: 20%;
    overflow: hidden;
}
.buddy__footer-internal-layer{
    position: absolute;
    height: 200%;
    width: 100%;
    bottom: 0;
    left: 0;
    transition: all 250ms ease-out;
}
.buddy__footer{
    position: relative;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    height: 50%;
    background-color: var(--primary-500);
}

/* ===== UTILITIES (SPECIFIC, DON'T MOVE IT FROM HERE) ===== */
.grid-col-3{grid-template-columns: repeat(3, 1fr);}
.grid-col-2{grid-template-columns: repeat(2, 1fr);}
.grid-col-1{grid-template-columns: 1fr;}
.subir{bottom: 0;}
.bajar{bottom: -100%;}

/* ===== EXTRA (1000px) ===== */
@media screen and (max-width: 1000px) {
    .main__content{
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== TABLET (810px) ===== */
@media screen and (max-width: 810px) {
    
}

/* ===== PHONE (480px) ===== */
@media screen and (max-width: 480px) {
    .main__content{
        grid-template-columns: 1fr;
        gap: var(--space-l);
    }
}