@import '../layout.css';
@import '../variables.css';

.card {
  padding: 20px;
  font-size: var(--font-size);
  line-height: var(--line-height);
  color: var(--outer-space);
  background-color: var(--white);
  border: var(--border-width) solid var(--mystic);
  border-radius: var(--border-radius);
  transition: box-shadow var(--transition-animation-time) var(--transition-animation-type);
}

.card:hover{
  box-shadow: var(--box-shadow-level-1);
}

.card a {
  color: var(--curious-blue);
}

.card a:hover {
  color: var(--denim);
}

.card a:active {
  color: var(--tory-blue);
}

.card ul {
  margin-top: 20px;
}

.card ul:nth-child(1) {
  margin-top: 0;
}

.card ul li h4 {
  margin-bottom: 0;
}

.card ul li.last {
  margin-bottom: 0;
}

.double-padding {
  padding: 40px;
}

.empty {
  border-color: var(--geyser);
  border-style: dashed;
}

.empty:hover {
  border-color: transparent;
}

.failed {
  border-color: var(--torch-red);
}

.no-border {
  border: 0;
}

.no-padding {
  padding: 0;
}
@import '../layout.css';
@import '../variables.css';

.card {
  padding: 1.5em;
  font-size: 0.875em;
  line-height: var(--line-height);
  color: var(--outer-space);
  background-color: var(--white);
  border: var(--border-width) solid var(--mystic);
  border-radius: var(--border-radius);
  transition: box-shadow var(--transition-animation-time) var(--transition-animation-type);
}

.card:hover{
  box-shadow: var(--box-shadow-level-1);
}

.card a:link,
.card a:visited {
  color: var(--curious-blue);
}

.card a:hover {
  color: var(--denim);
}

.card a:active {
  color: var(--tory-blue);
}

.double-padding {
  padding: 3em;
}

.empty {
  border-color: var(--geyser);
  border-style: dashed;
}

.empty:hover {
  border-color: transparent;
}

.failed {
  border-color: var(--torch-red);
}

.no-border {
  border: 0;
}

.no-padding {
  padding: 0;
}

Update px to em in Card component
Update px to em in Card component
