:root {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  line-height: 1.4;
  --fluid-margin: clamp(8px, -16px + 7.5vw, 32px);
}

html {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

body {
  /*   --fluid-scale-min-size: 8;
  --fluid-scale-min-width: 320;
  --fluid-scale-max-size: 32;
  --fluid-scale-max-width: 640;
  --fluid-scale-b: calc(
    (var(--fluid-scale-min-size) - var(--fluid-scale-max-size)) /
      (var(--fluid-scale-min-width) - var(--fluid-scale-max-width))
  );
  --fluid-scale-a: calc(
    var(--fluid-scale-max-size) -
      (var(--fluid-scale-b) * var(--fluid-scale-max-width))
  );
  --fluid-scale: clamp(
    var(--fluid-scale-min-size) * 1px,
    calc((var(--fluid-scale-a) * 1px) + (var(--fluid-scale-b) * 100vw)),
    var(--fluid-scale-max-size) * 1px
  ); */
  max-width: 960px;
  /*   max-width: 78ch; */
  margin: 0 var(--fluid-margin);
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

footer {
  width: 100%;
  color: #585858;
}

footer::before {
  margin-top: 32px;
  content: "";
  display: block;
  border-width: 1px 0 0 0;
  border-style: solid;
  border-color: #eeeeee;
}

form {
  max-width: 600px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: repeat(3, auto);
  gap: 8px;
}

form > label {
  display: block;
  margin: 0;
  padding: 0;
  grid-column: span 2 / span 2;
}

form > input {
  padding: 0.5em;
  grid-column: span 2 / span 2;
  grid-row-start: 2;
}

form > button {
  padding: 0.5em 1em;
  grid-column-start: 2;
  grid-row-start: 3;
}

.article-list {
  max-width: 600px;
}

.article-list > * {
  margin-bottom: 2rem;
}

.article-list:last-child {
  margin-bottom: 0;
}

.article-list article {
  display: grid;
  grid-template-columns: 9rem 1fr;
  grid-template-rows: auto auto 1fr auto;
  column-gap: 1rem;
  row-gap: 0.5rem;
}

.article-list article > * {
  margin: 0;
  padding: 0;
}

.article-list > article > img {
  grid-row: 1 / span 4;
  max-width: 100%;
  object-fit: contain;
}

.article-list > article > h2 {
  font-size: 1em;
  grid-row: 1;
  grid-column: 2;
}