@layer base {
  .rs-body {
    min-block-size: 100dvh;
    background: var(--rs-color-background-page);
  }

  .rs-stack {
    --rs-stack-gap: var(--rs-unit-x4);
    display: flex;
    flex-direction: column;
    gap: var(--rs-stack-gap);
  }

  .rs-cluster {
    --rs-cluster-gap: var(--rs-unit-x2);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rs-cluster-gap);
  }

  .rs-main {
    --rs-density: regular;
    container: rs-main / inline-size;
    inline-size: min(1120px, calc(100% - 32px));
    margin-inline: auto;
    padding-block: var(--rs-unit-x10);
  }

  .rs- {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: var(--rs-unit-x4);
  }

  @media (width < 640px) {
    .rs-text-title-4 {
      font-size: var(--rs-font-size-title-6);
      line-height: var(--rs-line-height-title-6);
    }

    .rs-main {
      --rs-density: compact;
      inline-size: min(100% - 24px, 1120px);
      padding-block: var(--rs-unit-x6);
    }
  }

  @container rs-main style(--rs-density: compact) {
    .rs-grid {
      gap: var(--rs-unit-x3);
    }

    .rs-card__body {
      padding: var(--rs-unit-x3);
    }
  }
}