.container2 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin-top: 5rem;
}

.nombre {
    width: 95%;
    height: 100%;

    padding: 1rem;

    z-index: 100;
}

.card-container {
    width: 100%;
    height: 100%;

    display: grid;
    justify-content: center;
    
    grid-template-columns: repeat(auto-fill, 21.6rem);
    grid-auto-rows: 13.35rem;
    gap: 1rem;

    padding: 1rem;
}

.containall{
    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
    padding: 1rem;
}

.add-card {
    width: 80%;
    height: 7rem;

    border-radius: 1rem;
    background-color: #878ddd;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.13s ease-in-out;

    cursor: pointer;
}

.add-card:hover {
    background-color: #7a73c4;
    transform: scale(1.01);
}

.add-card:active {
    background-color: #6a64a8;
    transform: scale(0.9);
}

.derecha{
    justify-self: end;
    margin-right: 1rem;
}

.volver{
    color: #878ddd;
    text-decoration: none;
}

.cont{

    display: flex;
    justify-content: right;
    align-items: right;
}