.image {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
}
.info {
height: auto; 
width: auto; 
max-width: 1500px; 
max-height: 666px;
}

.responsive-table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
}

.responsive-table th, .responsive-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.responsive-table th {
    background-color: #f2f2f2;
}

/* Mobile responsiveness */
@media screen and (max-width: 600px) {
    .responsive-table, .responsive-table thead, .responsive-table tbody, .responsive-table th, .responsive-table td, .responsive-table tr {
        display: block;
    }

    /* Hide table headers */
    .responsive-table thead tr {
        display: none;
    }

    .responsive-table td {
        border: none;
        border-bottom: 1px solid #ddd;
    }

    /* Stack the table data (td) on top of each other */
    .responsive-table td:before {
        display: none; /* Hide pseudo-elements */
    }
}
In this example, when the screen width is less than 600px, the table cells (<td>) will stack on top of each other, turning the table more into a list format. The table headers (<th>) will be hidden on small screens to avoid repetition.