personal-website/components/Card/styles.tsx

import styled from 'styled-components';
import Link from 'next/link';

export const StyledCard = styled(Link)<{ image?: boolean }>`
  cursor: pointer;
  width: 100%;
  display: grid;
  grid-template-columns: ${({ image }) => (image ? 'auto 9.375rem' : 'auto')};
  align-items: stretch;
  transition: color 0ms ease-in-out;
  text-decoration: none;
  color: var(--text);

  @media (max-width: 320px) {
    grid-template-columns: ${({ image }) => (image ? 'auto 7.813rem' : 'auto')};
  }

  @media (min-width: 1440px) {
    grid-template-columns: ${({ image }) =>
      image ? 'auto 15.625rem' : 'auto'};
  }

  &:hover {
    & > div {
      background: ${({ theme }) => theme.colors.blue};

      * {
        color: ${({ theme }) => theme.colors.dark.text} !important;
      }
    }

    img {
      filter: ${({ image }) => (image ? 'grayscale(80%)' : 'none')};
    }
  }

  .card-content {
    padding: 1rem 0rem;
    background: var(--secondary-background);
    display: grid;
    row-gap: 0.5rem;

    @media (max-width: 768px) {
      padding: 0.75rem 0rem;
    }
  }

  .card-image {
    position: relative;
    width: 100%;
  }

  h3,
  p,
  .tags-wrapper {
    padding: 0rem 1rem;

    @media (max-width: 768px) {
      padding: 0rem 0.5rem;
    }
  }

  h3 {
    font-size: 1.3rem;
  }

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

  span {
    font-size: 0.7rem;
  }
`;