:host {
  border-inline-start: none !important;
  background-color: var(--rh-color-surface-lightest, #ffffff) !important;
  background-image: none !important;
  color: var(--rh-color-text-primary-on-light, #151515) !important;
}

:host(:not([center])) #content { height: auto !important; }

#slide-header {
  display: flex !important;
}

#content {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  grid-template-areas: "title" !important;
  align-items: start !important;
  padding-inline: 5vw !important;
  padding-block-start: 2vw !important;
  align-content: start !important;
  overflow: visible !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#title {
  grid-area: title;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: start;

  ::slotted(:is(h1, h2, h3)) {
    font-size: 5vw !important;
    color: var(--rh-color-brand-red-on-light, #ee0000) !important;
    font-weight: 300 !important;
    font-family: var(--rh-font-family-heading, "Red Hat Display", sans-serif) !important;
    line-height: 1.2 !important;
    text-align: start !important;
  }
}

#aside {
  display: none;

  ::slotted(*) {
    margin: 0 !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
  }
}

.has-aside {
  --_grid-areas: none;
  --_grid-cols: 3fr 2fr;
  --_grid-rows: 5vw 1fr 5vw;
  --_header-col: 1;
  --_header-row: 1;
  --_content-col: 1;
  --_content-row: 2;
  --_footer-col: 1 / -1;
  --_footer-row: 3;
  --_footer-z: 2;
  --_footer-bg: transparent;

  #aside {
    display: flex !important;
    grid-column: 2;
    grid-row: 1 / -1;
    z-index: 1;
    flex-direction: column;
    justify-content: start;
    font-size: 1.75vw;
    color: var(--rh-color-text-primary-on-light, #151515);
    padding: 3vw;
    padding-block-start: 30%;
    background: var(--rh-color-surface-lighter, #f2f2f2);
  }
}

:host([variant="grey"]) {
  background-color: var(--rh-color-surface-lighter, #f2f2f2) !important;

  .has-aside #aside {
    background: var(--rh-color-surface-lightest, #ffffff) !important;
  }
}