#container {
  --main-padding: var(--rh-space-lg, 16px);

  max-width: var(--container-max-width);
  container: container / inline-size;
  padding-inline: var(--main-padding);
  padding-block: calc(var(--rh-space-3xl, 48px) + var(--main-padding)) var(--rh-space-6xl, 96px);

  @media (min-width: 768px) { --main-padding: var(--rh-space-5xl, 80px); }
}

h2 {
  font-size: var(--rh-font-size-heading-md, 1.75rem);
  font-weight: var(--rh-font-weight-heading-medium, 500);
  line-height: var(--rh-line-height-heading, 1.3);
  margin: 0;
}

rh-card {
  --rh-color-border-subtle: transparent !important;

  & p { margin: 0; }

  & rh-icon {
    width: var(--rh-size-icon-05, 48px);
    color:
      var(--rh-color-icon-primary,
        light-dark(
          var(--rh-color-icon-primary-on-light, #ee0000),
          var(--rh-color-icon-primary-on-dark, #ee0000)));
  }

  &.start {
    --rh-color-surface-lightest: transparent;
    --rh-color-surface-darkest: transparent;

    &::part(header),
    &::part(footer),
    &::part(body) {
      margin-inline: 0;
    }
  }

  &.nav {
    --nav-padding: var(--rh-space-2xl, 32px);

    margin-block: var(--rh-space-4xl, 64px);
    &:last-of-type { margin-block-end: 0; }

    width: calc(100% - 2 * var(--nav-padding));

    @media (min-width: 766px) { --nav-padding: var(--rh-space-3xl, 48px); }

    @media (min-width: 992px) { --nav-padding: var(--rh-space-4xl, 64px); }

    & > h2 {
      font-size: var(--rh-font-size-heading-xl, 2.5rem) !important;
      font-weight: var(--rh-font-weight-heading-regular, 400);
    }

    & [slot='image'] {
      max-width: 100%;
      height: auto;
    }

    &::part(container) {
      --_gradient-start:
        light-dark(
            var(--rh-color-gray-10, #f2f2f2),
            black
          );
      --_gradient-end: light-dark(white, var(--rh-color-gray-90, #1f1f1f));

      display: grid;
      background:
        linear-gradient(
            90deg,
            var(--_gradient-start) 0%,
            var(--_gradient-end) 100%
          );
      background-repeat: no-repeat;
      border-radius: 48px 16px;
      padding: var(--nav-padding);
      grid-template-rows: auto;
      grid-template-areas:
        'image'
        'header'
        'body'
        'footer';

      @container (min-width: 576px) {
        grid-template-rows: 1fr auto 1fr;
        grid-template-areas:
          'header image'
          'body image'
          'footer image';
      }
    }

    &::part(image) {
      grid-area: image;
      justify-self: center;
      margin-block-end: var(--rh-space-2xl, 32px);

      @container (min-width: 576px) {
        justify-self: end;
        margin-block-end: 0;
      }
    }

    &::part(header) {
      margin: 0;
      grid-area: header;
      align-self: end;
    }

    &::part(body) {
      margin-inline: 0 var(--rh-space-2xl, 32px);
      margin-block: var(--rh-space-lg, 16px) var(--rh-space-2xl, 32px);
      grid-area: body;
      align-self: center;
    }

    &::part(footer) {
      margin: 0;
      align-self: start;
      grid-area: footer;
    }
  }
}

.tiles {
  margin-bottom: var(--rh-space-7xl, 128px);

  & p {
    margin: 0;
    font-size: var(--rh-font-size-body-text-sm, 0.875rem);
  }
}

#hero {
  display: grid;
  margin-block-end: var(--rh-space-7xl, 128px);
  grid-template-columns: 1fr;
  grid-template-areas: 'text' 'image';
  align-items: center;
  gap: var(--rh-space-4xl, 64px);

  @container (min-width: 768px) {
    grid-template-columns: 4fr 3fr;
    grid-template-areas: 'text image';
    align-items: center;
  }

  & > div {
    grid-area: text;
  }

  & h1 {
    font-size: var(--rh-font-size-heading-2xl, 3rem);
    font-weight: var(--rh-font-weight-heading-regular, 400);
    font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif);
    line-height: var(--rh-line-height-heading, 1.3);
    max-width: 546px;
    color:
      var(--rh-color-brand-red,
        light-dark(
          var(--rh-color-brand-red-on-light, #ee0000),
          var(--rh-color-brand-red-on-dark, #ee0000)));
    margin: 0 0 var(--rh-space-3xl, 48px);
  }

  & p {
    margin: 0;
    font-size: var(--rh-font-size-body-text-xl, 1.25rem);
    line-height: var(--rh-line-height-body-text, 1.5);
  }

  & img {
    grid-area: image;
    min-width: 50%;
    max-width: 100%;
    height: auto;
    place-self: center center;
  }
}

.start-options {
  margin-block-end: var(--rh-space-2xl, 32px);
}