main.css

/* --- General styles --- */
* {
  /* transition: transform 300ms ease-in-out, box-shadow 400ms ease, background 100ms ease; */
  transition: all 100ms ease;
}
:focus {
  outline-width: var(--size-outline, 0.2rem);
  outline-style: solid;
  outline-offset: var(--size-outline, 0.2rem);
}

/* --- App specific --- */
*,
*::before,
*::after {
  border-style: solid;
  border-width: 0;
  /* Default background properties */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

#layout-page-base {
  position:relative;
  overflow-x: hidden;
}

a {
  text-decoration-skip-ink: auto; 
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 4px;
}
/* Repetition from reset.css because of cascade */
a.reset,
a.reset *,
.reset-a a,
.reset-a a *,
.reset-down-a a,
.reset-down-a a * {
  text-decoration: inherit;
}

input:not([type='submit']):not([type='button']):not([type='reset']),
textarea {
  border-width: 1px; /* TODO: remove this when sizing lib is ok */
}

/* #app {
  margin: auto;
  padding: 0 var(--gap);
  max-width: var(--measure);
} */

blockquote {
  border-left: var(--size-border-l, 0.4rem) solid;
  margin-left: 0;
  padding-left: var(--gap, 1.25rem);
  font-style: italic;
  /* font-size: var(--size-); */
}

/* tt,
 code,
 kbd,
 pre,
 samp {
   padding: 0 0.2rem;
 } */

.card-article {
  max-width: var(--width-col-2);
  --color-shadow: var(--color-blue-trans);
  --align-items: center;
  text-align: center;
}
.card-article .featured-image {
  width: 590px;
  height: auto;
  max-width: 100%;
  max-height: 400px;
  border-top-left-radius: var(--border-radius-m);
  border-top-right-radius: var(--border-radius-m);
}
.card-article hr {
  width: 8rem;
  border-top: 1px solid var(--color-secondary);
}
.card-article .author-name {
  line-height: 32px;
}