.div-mare-sport {
    display: grid;
    gap: 10px;
}

.card-sport {
    position: relative;
    border-radius: 10px;
    align-content: center;
    color: #404040;
}

.card-sport p {
    text-indent: 2em;
    margin: 0 .5em;
    text-align: justify;
}

.titlu-sport {
    position: absolute;
    justify-self: center;
    transform: translate(-50%, -50%);
    transition: transform .6s ease;
    text-align: center;
    width: 100%;
    font-size: 2.5em;
}

.info-sport {
    opacity: 0;
    margin-top: 1em;
    transition: opacity .6s ease, max-height .6s ease;
    padding:1em;
}

.card-sport:hover .titlu-sport {
    transform: translate(-50%, -50%) translateY(calc(-1 * var(--lift)));
    font-size: 1.5em;
    transition: .6s ease;
}

.card-sport:hover .info-sport {
    opacity: 1;
    transition: opacity 2s ease, max-height .6s ease;
}

.card-sport:not(:hover) .titlu-sport {
    transition:  .6s ease;
}



/* TELEFON SI TABLETA */
@media (max-width: 980px) {
    :root {
        --lift: 2.9em;
    }

    .div-mare-sport {
        grid-template-columns: repeat(1, 1fr);
    }

    .card-sport {
        height: 11em;
    }

    .titlu-sport {
        top: 50%;
        left: 50%;
        font-size: 1.5em;
    }
}

/* CALCULATOR */
@media (min-width: 981px) {
    :root {
        --lift: 2.7em;
    }

    .div-mare-sport {
        grid-template-columns: repeat(3, 1fr);

    }

    .card-sport {
        height: 19em;
    }

    .titlu-sport {
        left: 15vw;
        top: 3.5em;
    }
}

/* TELEFON */
@media (max-width: 640px) {
    .card-sport p {
        font-size: 0.8em;
    }
  
}