:root {
  --color-gray-100: hsl(225, 40%, 98%);
  --color-gray-200: hsl(225, 40%, 96%);
  --color-gray-300: hsl(220, 29%, 90%);
  --color-gray-400: hsl(219, 20%, 80%);
  --color-gray-500: hsl(219, 10%, 60%);
  --color-gray-600: hsl(221, 8%, 40%);
  --color-gray-700: hsl(218, 8%, 20%);
  --color-gray-800: hsl(220, 5%, 12%);
  --color-gray-900: hsl(210, 6%, 7%);

  --color-white: hsl(0, 0%, 100%);
  --color-black: var(--color-gray-900);

  --color-html: hsl(12, 80%, 52%);
  --color-html-light: hsl(12, 80%, 90%);

  --color-css: hsl(270, 80%, 52%);
  --color-css-light: hsl(270, 80%, 90%);

  --color-js: hsl(52, 80%, 52%);
  --color-js-light: hsl(52, 80%, 90%);

  --drop-shadow-300: 0.5px 0.125rem 0.125rem -0.0625rem rgba(0, 0, 0, 0.1),
    0.5px 0.25rem 0.25rem -0.0625rem rgba(0, 0, 0, 0.05);
  --drop-shadow-400: 1px 1rem 2rem -0.25rem rgba(0, 0, 0, 0.1),
    1px 0.25rem 0.25rem -0.25rem rgba(0, 0, 0, 0.05);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

/******************************************************************************/

body {
  background-color: var(--color-gray-100);
  color: var(--color-black);
  min-height: 100dvh;
}

img {
  max-width: 100%;
  overflow: hidden;
  display: block;
}

/******************************************************************************/

.card-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;

  @media (min-width: 600px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (min-width: 900px) {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  background-color: var(--color-white);
  background-size: cover;
  background-position: top center;
  height: 24rem;
  border-radius: 0.75rem;
  position: relative;
  transition: all 0.3s cubic-bezier(0.62, 0.16, 0.13, 1.01);
  box-shadow: var(--drop-shadow-300);
  z-index: 0;

  &:hover {
    box-shadow: var(--drop-shadow-400);
    z-index: 1;
  }

  a {
    height: 100%;
    width: 100%;
    display: block;
    color: inherit;
    text-decoration: none;
  }
}

.card__body {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  width: calc(100% - 1.5rem);
  border-radius: 0.5rem;
  padding: 0.5rem;

  /* Glassmorphism */
  background-color: color-mix(in hsl, var(--color-white) 30%, transparent);
  box-shadow: -0.5px 2px 4px -3px rgba(0, 0, 0, 0.15),
    -0.5px 2px 32px -8px rgba(0, 0, 0, 0.15),
    -0.5px -1px 1px color-mix(in hsl, var(--color-white) 90%, transparent) inset,
    -0.5px -1px 4px var(--color-white) inset;
  backdrop-filter: blur(10px);
}

.card__title {
  margin: 0 0 0.75rem;
  text-shadow: 0 0px 1px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.15);
}

.card__languages {
  list-style: none;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: start;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.card__language {
  padding: 0.3rem 0.5rem;
  border-radius: 0.25rem;
  font-weight: 700;
  font-size: 0.85rem;

  text-transform: uppercase;

  &[data-language="html"] {
    color: var(--color-html);
    background-color: var(--color-html-light);
  }

  &[data-language="css"] {
    color: var(--color-css);
    background-color: var(--color-css-light);
  }

  &[data-language="js"] {
    color: var(--color-js);
    background-color: var(--color-js-light);
  }
}