@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");

.card-contenido {
    background: #fff;
    border-radius: 4px;
    /* box-shadow: 0px 0px 20px 3px rgba(34, 35, 58, 0.5); */
    box-shadow: 0px 0px 14px 0px rgba(34, 35, 58, 0.5);
    max-width: 400px;
    display: flex;
    flex-direction: row;
    /* border-radius: 25px; */
    position: relative;
}

.card-contenido h2 {
    margin: 0;
    /* padding: 0 1rem; */
}

.card-contenido .title {
    padding: 1rem;
    text-align: right;
    color: #172456;
    font-weight: bold;
    font-size: 17px;
}

.card-contenido .desc {
    padding: 0.5rem 0rem;
    font-size: 12px;
}

.card-contenido .actions {
    padding: 0.5rem 1rem;
}

.card-contenido svg {
    width: 85px;
    height: 85px;
    margin: 0 auto;
}

.card-text {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

.title-total {
    padding: 2.5em 1.5em 1.5em 1.5em;
}



.img-portada {
    width: 100%;
}

.portada-1 {
    width: 100%;
    height: 100%;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    background-image: linear-gradient(180deg, #0e8539 40%, #3cec74 100%);
}

.img-1 {
    width: 80px;
    height: 80px;
    position: absolute;
    border-radius: 50%;
    border: 6px solid white;
    background-image: linear-gradient(180deg, #0e8539 40%, #3cec74 100%);
    top: 15px;
    left: 85px;
}

.portada-2 {
    width: 100%;
    height: 100%;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    background-image: linear-gradient(180deg, #0e4381 30%, #6a8aff 100%);
}

.img-2 {
    width: 80px;
    height: 80px;
    position: absolute;
    border-radius: 50%;
    border: 6px solid white;
    background-image: linear-gradient(180deg, #0e4381 30%, #6a8aff 100%);
    top: 15px;
    left: 85px;
}

.portada-3 {
    width: 100%;
    height: 100%;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    background-image: linear-gradient(180deg, #f60077 30%, #ed71b4 100%);

}

.img-3 {
    width: 80px;
    height: 80px;
    position: absolute;
    border-radius: 50%;
    border: 6px solid white;
    background-image: linear-gradient(180deg, #f60077 30%, #ed71b4 100%);
    top: 15px;
    left: 85px;
}

.buton-1 {
    &:hover {
        transform: rotate(5deg)
    }
}

.buton-2 {
    background: #83247f;
    color: white;

    &:hover {
        transform: rotate(5deg)
    }
}

.buton-3 {
    background: #0f1c4d;
    color: white;

    &:hover {
        transform: rotate(5deg)
    }
}