.header { display: flow-root; background: linear-gradient(90deg, rgba(88, 158, 165, 1) 0%, rgba(29, 78, 137, 1) 42%); border-radius: 0 0 30px 30px; padding: 16px 0; } .content { display: flex; width: max-content; justify-content: space-between; gap: 40px; } .content a { font-size: 13pt; color: var(--defaultColor); } .parent { display: flex; justify-content: space-between; align-items: center; } .logoContent { display: flex; flex-direction: row-reverse; align-items: end; gap: 10px; } .logo { width: 50px; height: 50px; } .logo img { width: 100%; height: 100%; object-fit: contain; } .logoTxt { display: flex; flex-direction: column; gap: 8px; } .logoTxt h1 { width: max-content; font-size: 15pt; color: var(--defaultColor); font-weight: normal; } .logoContent h1:last-child { font-size: 10pt; } /* responsive */ @media screen and (min-width:360px) and (max-width:601px) { .content, .logoContent { display: none; } .header { border-radius: 0 0 15px 15px; padding: 16px; } } @media screen and (min-width:601px) and (max-width:1024px) { .content, .logoContent { display: none; } .header { border-radius: 0 0 15px 15px; padding: 16px; } }