@media screen and (min-width: 640px) {
    .card {
        display: flex;
        text-align: center;
        justify-content: center;
        flex-wrap: wrap;
        height: 80vh;
    }

    .image-container {
        position: relative;
        width: calc(50% - 20px);
        margin: 10px;
        overflow: hidden;
    }

    .image-container img {
        width: 20vw;
        height: 35vh;
        cursor: pointer;
        transition: transform 0.3s ease;
    }

    .details {
        display: none;
        text-align: center;
    }

    .image-container.expanded {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        height: 80%;
        width: 100%;

        z-index: 1;
    }

    .image-container.expanded img {
        height: 70%;
        width: 60%;
    }

    .image-container.expanded .details {
        display: block;
    }

    .tmc{
        width: 80%;
    }
}