.headline {
  display: grid;
  gap: var(--space-medium);
  margin-left: var(--space-medium);
  margin-right: var(--space-medium);
  position: relative;
}

.headline header,
.headline article {
  display: grid;
}

.headline header h1,
.headline header h2,
.headline header h3,
.headline header h4 {
  font-size: var(--font-size-medium);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.15;
  margin-bottom: -0.1875em;
  margin-top: -0.4375em;
  position: relative;
}

.headline header h1 a,
.headline header h2 a,
.headline header h3 a,
.headline header h4 a {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}

.headline header br {
  display: none;
}

.headline article {
  gap: var(--space-medium);
}

.headline article p {
  font-size: var(--font-size-x-small);
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.325em;
  margin-top: -0.5625em;
}

.headline article br {
  display: none;
}

.headline footer p {
  align-items: center;
  display: flex;
  gap: 0.5em;
}

.headline footer p span {
  font-size: var(--font-size-xxx-small);
  letter-spacing: var(--letter-spacing-loose);
  line-height: var(--line-height);
}



.headline--align-center {
  justify-items: center;
  text-align: center;
}

.headline--align-center header,
.headline--align-center article {
  justify-items: center;
}

.headline--width-narrow header,
.headline--width-narrow article {
  width: min(100%, 24em);
}



@media(hover: hover) {

  .headline header h1 a:focus, .headline header h1 a:hover,
  .headline header h2 a:focus,
  .headline header h2 a:hover,
  .headline header h3 a:focus,
  .headline header h3 a:hover,
  .headline header h4 a:focus,
  .headline header h4 a:hover {
    color: var(--color-blue);
    text-decoration: underline;
  }

}



@media(min-width: 64em) {

  .headline {
    grid-template-columns: repeat(12, 1fr);
    margin-left: var(--space-neutral);
    margin-right: var(--space-neutral);
  }

  .headline header br,
  .headline article br {
    display: inline;
  }

  .headline header,
  .headline footer {
    grid-column: 1/-1;
  }

  .headline article {
    grid-column: span 9;
  }

  .headline--align-center {
    grid-template-columns: none;
  }

  .headline--align-center header,
  .headline--align-center article {
    grid-column: auto;
  }

}