personal-website/components/Hero/styles.tsx

import styled from 'styled-components';

export const Wrapper = styled.div`
  min-height: 45vh;
  display: grid;
  grid-template-columns: 1fr 32.188rem;
  align-items: center;
  height: auto;
  text-align: left;

  @media (max-width: 1024px) {
    min-height: 35vh;
    grid-template-columns: 1fr;

    .photo {
      display: none;
    }
  }

  h2 {
    font-size: 1.5rem;

    @media (min-width: 1440px) {
      font-size: 2rem;
    }

    @media (min-width: 2560px) {
      font-size: 3.5rem;
    }
  }

  .blue {
    color: ${({ theme }) => theme.colors.blue};
  }
`;