.header { display: flex; justify-content: space-between; align-items: center; } .header .title { display: flex; text-align: center; justify-content: space-between; align-items: center; } .header .title h3 { margin: 0; padding: 0; } .header .title .badges > * { margin-left: var(--gap); } .header .buttons { display: flex; justify-content: space-between; align-items: flex-end; } @media screen and (max-width: 900px) { .header { flex-direction: column; } } @media screen and (max-width: 700px) { .header .title { flex-direction: column; padding-bottom: var(--gap-double); } .header .title .badges > * { margin-left: 0; } .header .title .badges { display: flex; flex-direction: row; justify-content: space-between; width: 100%; } }