.archive .articles-container {
  padding-block: var(--columns-gap);
}
h1 {
  text-transform: capitalize;
}
.article {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
  gap: 1rem;
  position: relative;
  border-radius: 1em;
  overflow: hidden;
}
.article img {
  aspect-ratio: 16/9;
  width: 100%;
  object-fit: cover;
}
.article div {
  display: grid;
  gap: var(--gap);
  padding: 1em;
}
.article h2 {
  font-size: var(--fs-m);
}
.screen-reader-text {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  position: absolute !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden !important;
  /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
  clip: rect(1px 1px 1px 1px);
  /* maybe deprecated but we need to support legacy browsers */
  clip: rect(1px, 1px, 1px, 1px);
  /* modern browsers, clip-path works inwards from each corner */
  clip-path: inset(50%);
  /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
  white-space: nowrap;
}
.pagination {
  display: grid;
  place-content: center;
  margin-block-start: var(--columns-gap);
}
.nav-links {
  display: flex;
  gap: var(--gap);
  font-size: var(--fs-l);
}