#span_Container {
    display: flex;
    width: auto;
    height: 50vh;
    justify-content: center;
    border: solid lightgray 1px;
    padding: 0.5rem;
    margin: 0.5rem;
    border-radius: 0.5rem;
    margin-top: 1rem;
}

.card {
    color: black;
    height: 20vh;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.card p {
    cursor: pointer;
    height: 47vh;
    width: 27rem;
    flex: 1;
    overflow: hidden;
    border-radius: 0.5rem;
    transition: ease-in-out 5s;
    border: solid lightgray 1px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card p img {
    width: auto;
    height:max-content;
    border-radius: 8px;
    mask-image: linear-gradient(
            to bottom,
            black 0%,
            black 50%,
            transparent 75%  
        );
}

.card p span {
    min-width: 53em;
    text-align: center;
    transition: all 2s;
}

.card p:hover {
    flex: 3;
}