.container {
    padding-top: 100px;
    max-width: 1400px;
    margin: 0 auto;
    padding-bottom: 50px; 
    width: 66%;           
}

.container .image-container {
    text-align: center;
    width: 100%;
}
.image-container img {
    max-width: 600px;
}

h2 {
    margin-top: 3rem;
    text-decoration: underline;
    color: var(--primary-color)
}

h3 {          
    margin-top: 1rem;
    color: var(--secondary-color)
}

div.subsection div.text {
    font-family: 'Lustra', sans-serif;
}

.grid {
    display: flex;
    flex-direction: column;
}

.grid .row {
    width: 100%;
    display: flex;
    flex-direction: row;
}        

.grid .row .version {width: 20%;}
.grid .row .description {width:60%;}
.grid .row .date {width: 20%;}

.grid.table .header  {
    color: orange;
    background-color: var(--background-color);
}

.grid.table .row:nth-child(2k+1) {
    background-color: grey;
}

.col-12.header {
    text-decoration: underline;
    margin-top: 16px;
    margin-bottom: 8px;
}

@media screen and (max-width: 500px) {
    .container {
        width: 100%; /* Full width minus padding */
        padding: 0 20px;
    }

    .image-container img {
        width: 100%;
    }
}