.newsletter-page {
  background: var(--color-light-grey);
}

.newsletter-topbar {
  margin-top: 12px;
}

.newsletter-spacer {
  min-height: clamp(120px, 18vw, 200px);
}

.newsletter-block {
  background: var(--color-coloring-grey);
  padding: clamp(100px, 13vw, 120px) 24px;
  margin-bottom: 32px;
  box-sizing: border-box;
}

.newsletter-inner {
  width: min(664px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.newsletter-inner h1 {
  margin: 0;
  text-align: center;
  font-size: clamp(28px, 4.6vw, 36px);
  line-height: 1.2;
  font-weight: 400;
  color: var(--color-black);
}

.newsletter-subscribe {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.newsletter-subscribe p {
  margin: 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.3;
  color: var(--color-black);
}

.reading-pill-wrap {
  width: var(--grid-content-width);
  margin: -4px auto 24px;
  display: flex;
  justify-content: center;
}

.reading-pill-wrap .read-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 56px;
  height: 40px;
  border-radius: 75px;
  background: var(--color-elements-64);
  box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.04), 0 12px 38px rgba(0, 0, 0, 0.04),
    0 5px 46px rgba(0, 0, 0, 0.04), 0 5px 15px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--color-dark-grey);
  font-size: 13px;
  line-height: 1.2;
}

.reading-pill-wrap .read-pill .read-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-coloring-violet);
}

.reading-pill-wrap .read-pill .read-prefix,
.reading-pill-wrap .read-pill .read-current {
  font-weight: 400;
  font-style: normal;
}

.reading-pill-wrap .read-pill .read-prefix {
  color: var(--color-dark-grey);
}

.reading-pill-wrap .read-pill .read-current {
  color: var(--color-black);
}

@media (max-width: 420px) {
  .newsletter-block {
    padding-inline: 16px;
  }

  .newsletter-inner {
    width: 100%;
  }

  .newsletter-inner h1 {
    width: 100%;
    font-size: 28px;
  }

  .newsletter-subscribe {
    width: 100%;
  }

  .newsletter-subscribe p {
    width: 100%;
  }

}