@media (max-width: 1024px) {
  body {
    font-size: 0.95rem;
  }

  .hero__content,
  .howto-card,
  .server-characteristics__body {
    flex-direction: column;
  }

  .hero__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .hero__actions,
  .section__head,
  .hero__tags,
  .howto-card__actions {
    flex-direction: column;
    gap: 10px;
  }

  .hero__actions .btn,
  .howto-card__actions .btn,
  .btn-primary,
  .btn-secondary,
  .btn-ghost {
    width: 100%;
    text-align: center;
  }

  .news-grid,
  .howto-grid,
  .features-grid {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }

  .countdown-bar,
  .howto-card__media,
  .selection-media {
    width: 100%;
  }

  .topbar__menu {
    width: 100%;
  }

  .topbar__actions,
  .hero__socials {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .topbar,
  .hero__actions,
  .selection-tabs,
  .howto-card__left,
  .section__head {
    padding-inline: 16px;
  }

  .hero__eyebrow,
  .section__kicker,
  .selection-tab__label {
    font-size: 0.7rem;
  }

  .hero__left h1 {
    font-size: 2rem;
  }

  .selection-tabs {
    flex-direction: column;
    gap: 8px;
  }
}