.folder-list { display: flex; flex-wrap: wrap; } .folder-list .folder-list-item { flex-grow: 0; width: 50%; margin-bottom: 20px; } .folder-list .folder-list-item.first-odd { flex-grow: 0; width: 100%; margin-bottom: 20px; } .folder-list .folder-list-item .folder-list-item-container { border:1px solid #e2f2c0; padding: 10px 0; font-size: 12px; margin: 0 5px; } .folder-list .folder-list-item .folder-list-item-validity { margin-bottom: 10px; color: #202020; } .folder-list .folder-list-item .folder-list-item-img { width: 100%; min-height: 200px; background-repeat: no-repeat; background-position: 50% 0; background-size: contain; } .folder-list .folder-list-item.first-odd .folder-list-item-img { min-height: 500px; } .folder-list .folder-list-item .folder-list-item-title { text-decoration: none; color: #202020; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; } .folder-list .folder-list-item .folder-list-item-date { text-decoration: none; color: #202020; margin-bottom: 10px; } .folder-list a:hover { text-decoration: none; } @media only screen and (max-width: 600px) { .folder-list .folder-list-item { width: 50%; } .folder-list .folder-list-item.first-odd .folder-list-item-img { min-height: 200px; } }