I am trying to replace a header content when the screen height decreases by removing a large image I have in a div which is basically a logo and placing it as a little logo in the center at the top of the middle of the page only when the screen height goes from 800px and below. Below is the code to give you an idea of what the header container looks like.

Header.jsx

import React from 'react'
import './header.css'
import CTA from './CTA'
import Logo from '../../assets/fts_blacks1.png'
import HeaderSocials from './HeaderSocials'

const Header = () => {
  return (
    <header>
      <div className="container header__container">
        <h5>Welcome To</h5>
        <h1>Favourite Tech Solutions</h1>
        <h5 className="text-light">The Digital Interdependence</h5>
        <CTA />
        <HeaderSocials />
        <div className="me">
          <img src={Logo} alt="Logo" />
        </div>
        <a href="#contact" className='scroll_down'>Scroll me</a>
      </div>
    </header>
  )
}

export default Header

header.css

header{
    /* height: 100vh; */
    padding-top: 7rem;
    overflow: hidden;  
}
.header__container{
    text-align: center;
    height: 100%;
    position: relative;
}

/* cta section */

.cta{
    margin-top: 2.5rem;
    display: flex;
    gap: 1.2rem;
    justify-content: center;
}

/* header socials section */

.header_socials{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    position: absolute;
    left: 0;
    bottom: 3rem;
}
.header_socials::after{
    content: "";
    width: 1px;
    height: 2rem;
    background: var(--color-primary);
}

/* header image section */

.me{
    background: linear-gradient(var(--color-primary), transparent);
    width: 22rem;
    height: 30rem;
    position: absolute;
    left: calc(50% - 11rem);
    margin-top: 4rem;
    border-radius: 12rem 12rem 0 0;
    overflow: hidden;
    padding: 7.5rem 2.5rem 1.5rem 4rem;
}

/* scroll section */

.scroll_down{
    position: absolute;
    right: -2.3rem;
    bottom: 5rem;
    transform: rotate(90deg);
    font-weight: 300;
    font-size: 0.9rem;
}

@media screen and (max-width: 600px){
    .header_socials, 
    .scroll_down{
        display: none;
    }
}

There is nothing in my code to show the media screen height at 800px because I dont know how to go about it that is why I am asking here As you can see above, the image is in a div tag with className = 'me' This is the image i want to take off entirely from that position when the screen height reduces and and place it at the top of the <h1> Favourite Tech Solutions</h1>