personal-website/styles/blog/slug.tsx

import styled from 'styled-components';

export const Wrapper = styled.div`
  min-height: 75vh;
  padding: 1rem 0rem;
  display: grid;
  grid-template-rows: auto 1fr;
  row-gap: 2rem;

  @media (max-width: 768px) {
    row-gap: 1rem;
  }

  .meta {
    .back {
      cursor: pointer;
      text-align: left;
      display: inline-flex;
      align-items: center;

      span {
        color: ${({ theme }) => theme.colors.blue} !important;
      }
    }

    .image {
      margin: 1rem 0rem;
    }

    h1,
    p,
    .tags-wrapper {
      text-align: left;
    }

    h1 {
      font-size: 2rem;
    }

    h2 {
      font-size: 1.2rem;
    }

    .tags-wrapper {
      display: flex;
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;
    }
  }

  hr {
    height: 0.1rem;
    opacity: 0.3;
    margin: 1rem auto 0rem auto;

    @media (max-width: 768px) {
      margin: 1rem auto 0rem auto;
    }
  }

  .content {
    h1 {
      font-size: 1.5rem;
    }

    h2 {
      font-size: 1.3rem;
    }

    h3 {
      font-size: 1.1rem;
    }

    & > * {
      margin: 0.5rem 0rem;
    }

    button {
      margin: 1rem 0rem;
    }

    p * {
      width: 100%;
      height: auto;
    }

    ul,
    ol {
      margin-left: 1.5rem;
    }
  }
`;