.header { display: flow-root; position: fixed; box-sizing: border-box; width: 100%; background: linear-gradient(90deg, rgba(88, 158, 165, 1) 0%, rgba(29, 78, 137, 1) 42%); border-radius: 0 0 30px 30px; z-index: 200; padding: 16px 0; top: 0; } .content { display: flex; width: max-content; justify-content: space-between; position: relative; gap: 40px; } .content span { font-size: 13pt; color: var(--defaultColor); cursor: pointer; } .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: 120%; height: 120%; 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: 17pt; } /* 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; } }