.homepage {
  background: linear-gradient(to top right, var(--bg), var(--highlight-lightest), var(--bg));
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 45px);
  display: flex; }
  .homepage h1, .homepage h2, .homepage h3, .homepage h4, .homepage h5, .homepage h6 {
    margin-block-start: 0.6rem;
    margin-block-end: 0.6rem;
    margin-inline-start: 0px;
    margin-inline-end: 0px; }
  @media screen and (min-width: 649px) {
    .homepage {
      padding: 1.6rem; } }
  .homepage .homepage-inner {
    flex: 1 1 100%;
    max-width: 1800px; }
    .homepage .homepage-inner h2 i {
      float: right; }
    .homepage .homepage-inner ul.feature-nav {
      padding: 0;
      list-style: none;
      font-size: var(--font-size-medium); }
      .homepage .homepage-inner ul.feature-nav a {
        padding-left: 0.5rem;
        margin-right: 1rem;
        display: block;
        line-height: var(--button-line-height-medium);
        color: var(--text-light);
        text-decoration: none;
        transition: all ease-in-out 0.2s; }
        .homepage .homepage-inner ul.feature-nav a i {
          margin-right: 0.5rem;
          width: 1rem; }
      .homepage .homepage-inner ul.feature-nav a:hover {
        background: var(--text-blue);
        color: white; }
    .homepage .homepage-inner .homepage-card {
      border-radius: 0.5rem;
      background: var(--white);
      padding-left: 1rem;
      padding-right: 1rem;
      padding-top: calc(var(--text-line-height-medium) / 4);
      padding-bottom: calc(var(--text-line-height-medium) / 4);
      margin-left: 0;
      margin-right: 0;
      margin-bottom: var(--text-line-height-medium); }
    .homepage .homepage-inner hr {
      height: calc(var(--button-line-height-medium) / 2);
      border: none;
      border-bottom: 1px solid var(--line); }
    .homepage .homepage-inner .notification-count-bubble {
      padding-left: 0.5em;
      padding-right: 0.5em;
      padding-top: 0.16em;
      font-size: var(--text-size-micro);
      line-height: var(--button-line-height-micro);
      background: var(--hazard);
      display: inline-block;
      border-radius: 0.5em;
      color: white;
      transform: translateY(-0.16em); }
    @media screen and (min-width: 800px) {
      .homepage .homepage-inner {
        --gap: 1.6rem;
        display: grid;
        grid-template-columns: 26ch 1fr;
        grid-auto-rows: minmax(min-content, max-content);
        grid-gap: var(--gap); }
        .homepage .homepage-inner section.homepage-card {
          margin-top: 0;
          margin-bottom: 0; }
        .homepage .homepage-inner > *:nth-child(1) {
          grid-column: 1 / 2;
          display: grid;
          grid-auto-rows: minmax(min-content, max-content);
          grid-template-columns: 1fr;
          grid-gap: var(--gap); }
        .homepage .homepage-inner > *:nth-child(2) {
          grid-column: 2 / 3;
          display: grid;
          grid-gap: var(--gap);
          grid-auto-rows: minmax(min-content, max-content);
          grid-template-columns: 1fr 1fr; }
          .homepage .homepage-inner > *:nth-child(2) #homepage-widget-recent,
          .homepage .homepage-inner > *:nth-child(2) #homepage-widget-favourites {
            grid-column: 1 / 3; }
        .homepage .homepage-inner ul, .homepage .homepage-inner p {
          margin-block-start: calc(var(--text-line-height-medium) / 2);
          margin-block-end: calc(var(--text-line-height-medium) / 2);
          line-height: var(--button-line-height-medium); }
        .homepage .homepage-inner #homepage-widget-reporting {
          border-left: 4px solid var(--brand-5);
          border-top-left-radius: 0;
          border-bottom-left-radius: 0; }
        .homepage .homepage-inner #homepage-widget-datamodel {
          border-left: 4px solid var(--brand-2);
          border-top-left-radius: 0;
          border-bottom-left-radius: 0; }
        .homepage .homepage-inner #homepage-widget-etl {
          border-left: 4px solid var(--brand-3);
          border-top-left-radius: 0;
          border-bottom-left-radius: 0; } }
    @media screen and (min-width: 1150px) {
      .homepage .homepage-inner > *:nth-child(2) {
        grid-template-columns: 1fr 1fr 1fr; }
        .homepage .homepage-inner > *:nth-child(2) #homepage-widget-recent,
        .homepage .homepage-inner > *:nth-child(2) #homepage-widget-favourites {
          grid-column: 1 / 4; } }
    @media screen and (min-width: 1850px) {
      .homepage .homepage-inner {
        margin: 1rem auto; } }
    @media screen and (min-width: 2250px) and (min-height: 1200px) {
      .homepage .homepage-inner {
        margin: 2rem auto;
        grid-gap: 2rem;
        margin-top: calc(var(--text-line-height-medium) * 4); } }
    .homepage .homepage-inner p {
      line-height: var(--text-line-height-medium);
      color: var(--text-light); }
    @media screen and (max-width: 649px) {
      .homepage .homepage-inner ul.feature-nav {
        padding: 0;
        list-style: none;
        font-size: var(--font-size-medium); }
        .homepage .homepage-inner ul.feature-nav a {
          display: flex;
          flex-direction: row;
          line-height: var(--text-line-height-medium);
          padding-top: calc(var(--text-line-height-medium) / 4);
          padding-bottom: calc(var(--text-line-height-medium) / 4); }
          .homepage .homepage-inner ul.feature-nav a i {
            display: block;
            line-height: var(--text-line-height-medium);
            height: 1.6rem; }
          .homepage .homepage-inner ul.feature-nav a span {
            display: block; }
          .homepage .homepage-inner ul.feature-nav a span.ago-marker {
            display: none; } }