vanilla/components/threeCard/style.css

:root {
  /* Font Sizes */
  --fs-100: 0.625rem;
  --fs-200: 0.75rem;
  --fs-300: 0.875rem;
  --fs-400: 1rem;
  --fs-500: 1.125rem;
  --fs-600: 1.25rem;
  --fs-700: 1.5rem;
  --fs-800: 2.5rem;
  --fs-900: 3.5rem;

  --fw-regular: 400;
  --fw-semi-bold: 500;
  --fw-bold: 700;

  /* Color variables */
  --clr-bg-ltheme: #edebe9;
  --clr-text-ltheme: #1b1b1b;
  --clr-accent-ltheme: #ff8000;
  --clr-primary-ltheme: #d4d4d2;
  --clr-secondary-ltheme: #babcbb;
  --clr-link-ltheme: blue;
  --clr-border-ltheme: blue;

  --clr-bg-dtheme: #121212;
  --clr-text-dtheme: #edebe9;
  --clr-accent-dtheme: #3a3b9c;
  --clr-primary-dtheme: #1b1b1b;
  --clr-secondary-dtheme: #2d2d2d;
  --clr-link-dtheme: blue;
  --clr-border-dtheme: blue;

  /* General Colors  */
  --black: #000;
  /* Black */
  --white: #fff;
  /* White */
  --clr-000: #636363;
  --clr-100: #5A5A5A;
  --clr-200: #515151;
  --clr-300: #484848;
  --clr-400: #3F3F3F;
  --clr-500: #363636;
  --clr-600: #2D2D2D;
  --clr-700: #242424;
  --clr-800: #1B1B1B;
  --clr-900: #121212;

  /* Semantic Colors */
  --clr-success: #118c11;
  --clr-info: #17a2b8;
  --clr-warning: #ff8000;
  --clr-danger: #d00000;
}

/* CSS Resets */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margins. */
* {
  margin: 0;
  padding: 0;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Make images easiser to work with. */
img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

/* Remove list styles (bullets/numbers) */
ol,
ul,
menu {
  list-style: none;
}

/* Form elements inherit font styles. */
input,
textarea,
button,
select {
  font: inherit;
}

/* Motion Reducted Media Query */
@media screen and (prefers-reduced-motion: reduce),
(update: slow) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Screen reader friendly hidden. */
.visually-hidden:not(:focus):not(:active) {
  border: 0;
  clip: rect(0 0 0 0);
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

/* Body and core Themes */

body {
  display: grid;
  min-width: 100vw;
  min-height: 100vh;
  align-items: start;
  justify-items: center;
  line-height: 1.5rem;
  background-color: var(--clr-bg-ltheme);
  color: var(--clr-text-ltheme);
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--clr-bg-dtheme);
    color: var(--clr-text-dtheme);
  }
}

.test {
  min-height: 100vh;
}

.container {
  display: grid;
}

.parent {
  display: flex;
  flex-wrap: wrap;
  padding-top: 2rem;
  padding-bottom: 1rem;
  align-self: start;
  justify-self: center;
  max-width: 1300px;
}

.box {
  display: grid;
  flex: 1 1 220px; /*  Stretching: */
  margin: 1.5rem;
  box-shadow: rgba(58, 59, 156, 1) 0px 3px 8px;
  border-radius: 5px;
  background-color: var(--clr-secondary-dtheme);
}

h3 {
  margin-bottom: 1rem;
  width: 90%;
  justify-self: end;
  font-size: 1.5rem;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}

span {
  justify-self: center;
  font-size: 2.5rem;
  border: 2px solid var(--clr-accent-dtheme);
  border-radius: 99rem;
  height: fit-content;
  padding: 1.125rem;
  position: relative;
  top: -1.5rem;
  background-color: var(--clr-secondary-dtheme);

}

p {
  width: 90%;
  justify-self: center;
  margin-bottom: 2rem;
  font-size: 1.125rem;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
}

.hidden {
  opacity: 0;
  filter: blur(5px);
  transform: translateX(-100%);
  transform: translateZ(-100%);
  transition: all 1s;
}

.show {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
  transform: translateZ(0);
}