@layer page {
  /* Homepage */
  .container {
    padding-block-start: var(--rh-space-4xl);
  }

  #feature {
    display: block;
    padding-block: var(--rh-space-3xl);
  }

  #feature::part(container),
  #feature::part(header),
  #feature::part(body),
  #feature::part(footer) {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #feature::part(header) {
    font-size: var(--rh-font-size-heading-xl);
    color: var(--rh-color-text-brand-on-light);
    margin-block-start: var(--rh-space-3xl);
    margin-inline: var(--rh-space-3xl);
    text-align: center;
  }

  #feature::part(body) {
    justify-content: center;
    text-align: center;
    font-size: var(--rh-font-size-body-text-lg);
    max-width: 55rem;
  }

  #feature::part(footer) {
    gap: var(--rh-space-3xl);
    margin-block-end: var(--rh-space-3xl);
  }

  #get-started {
    container-type: inline-size;
    container-name: get-started container;
  }

  rh-tile > h2 {
    font-size: var(--rh-font-size-heading-xs) !important;
    margin-block-start: var(--rh-space-2xl) !important;
  }

  #get-started > h2 {
    font-size: var(--rh-font-size-heading-lg);
    font-weight: var(--rh-font-weight-heading-medium);
    margin-block: var(--rh-space-3xl);
    max-width: 100%; /* overrides base max width */
  }

  #get-started > p {
    max-width: 100%; /* overrides base max width */
    margin: 0 auto var(--rh-space-3xl);
  }

  @container get-started (min-width: 768px) {
    rh-tile h2 {
      font-size: var(--rh-font-size-heading-sm) !important;
      margin-block-start: var(--rh-space-2xl) !important;
    }
  }

  #contribute::part(header),
  #contribute::part(body),
  #contribute::part(footer) {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #contribute {
    display: block;
    margin-block-start: var(--rh-space-5xl);
  }

  #contribute::part(container) {
    border: none;
  }

  #contribute::part(header) {
    font-family: var(--rh-font-family-heading);
    font-size: var(--rh-font-size-heading-lg);
  }

  #contribute::part(body) {
    font-size: var(--rh-font-size-body-text-lg);
  }

  #contribute::part(footer) {
    padding-block-start: var(--rh-space-xl);
  }

  @container main (min-width: 576px) {
    .container {
      padding-block-start: var(--rh-space-6xl);
    }
  }
}