.container {
    display: flex;
}

.sidebar {
    width: 20%;
    background: #ddd; /*tło menu*/
}

.sidebar ul {
    list-style-type: none; /*usuwamy kropki z listy*/
    padding: 0; /*usuwamy domyślne wcięcie listy*/
}

.content {
    width: 80%;
    display: flex;
    justify-content: space-around; /*rozdzielamy obrazy równomiernie po szerokości*/
    align-items: center; /*wyśrodkowujemy obrazy w pionie*/
}

.dim {
    opacity: 0.5; /*domyślnie obrazy są "wygaszone"*/
    transition: opacity 0.3s ease-in-out; /*efekt płynnego "rozjaśniania" obrazów*/
}

.dim:hover {
    opacity: 1; /*obraz "rozjaśnia się" gdy najedziemy na niego myszką*/
}