.tarjetas-discograficas{
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin: 1rem;
    justify-content: center;
}

.contenido-disco{
    border-radius: 15px;
    width: 25em;
    height: auto;
    background-color: var(--color-principal);
    outline: 1px solid var(--color-blanco);
    max-width: 800px;
    padding: 1rem;
    display: flex;
    flex-direction: row;
}

.contenido-disco img{
    min-width: 50%;
}

.contenido-disco div{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-left: 0.8rem;
}

.contenido-disco div h2{
    color: var(--color-blanco);
    font-size: 1.25rem;
    font-weight: 700;
}

.contenido-disco div p{
    color: var(--color-blanco);
    font-weight: 350;
    font-size: 1rem;
}

.contenido-disco div a{
    background-color: var(--color-blanco);
    border-radius: 10px;
    color: var(--color-negro);
    padding: 10px;
    margin-top: auto;
    font-weight: 700;
    text-decoration: none;
    align-self: flex-end;
    transition: opacity 0.3s ease;
}

.contenido-disco div a:hover{
    opacity: 0.85;
}

/************************************/
/***   DISEÑO PARA TABLETAS 768   ***/
/************************************/

@media only screen and (max-width: 768px){
    .contenido-disco div p{
        font-size: 0.9rem;
    }

    .contenido-disco div a{
        font-size: 0.9rem;
    }
}


/************************************/
/***   DISEÑO PARA MOVILES 480    ***/
/************************************/

@media only screen and (max-width: 480px){
    .tarjetas-discograficas{
        flex-direction: column;
    }

    .contenido-disco{
        width: 300px;
        margin: 0 auto;
    }

    .contenido-disco > div > h2, .contenido-disco > div > p{
        font-size: 0.9rem;
    }

    .contenido-disco div a{
        font-size: 0.70rem;
    }    
}