.homepage {
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 45px);
  display: flex; }
  @media screen and (min-width: 649px) {
    .homepage {
      padding: 1rem; } }
  .homepage .homepage-inner {
    flex: 1 1 100%;
    max-width: 1800px; }
    .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 {
      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-top: 1rem;
      margin-bottom: 1rem;
      margin-left: 0;
      margin-right: 0; }
    @media screen and (min-width: 960px) {
      .homepage .homepage-inner {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-auto-rows: minmax(min-content, max-content);
        grid-auto-columns: repeat(3, 4fr);
        grid-gap: 1rem; }
        .homepage .homepage-inner .homepage-card {
          padding-top: 0rem;
          padding-bottom: 0rem;
          margin-top: 0rem;
          margin-bottom: 0rem;
          grid-column: span 4;
          grid-row: auto; }
        .homepage .homepage-inner section {
          grid-column: auto; }
        .homepage .homepage-inner #homepage-widget-recent,
        .homepage .homepage-inner #homepage-widget-favourites {
          grid-column: span 8; } }
    @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; } }