.new-modules {
  // We use the same colors for the new module section as we do for the quickicons.
  --text-color: var(--template-quickicon-color);
  --bg-color: hsl(var(--hue), 60%, 97%);
  --bg-color-hvr: var(--template-bg-dark);
  --icon-color: var(--template-quickicon-color);
  --icon-color-hvr: hsl(var(--hue), 50%, 93%);

  .card-columns {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

@if $enable-dark-mode {
  @include color-mode(dark) {
    .new-modules {
      --bg-color: var(--template-bg-dark-80);
      --bg-color-hvr: var(--template-bg-dark-65);
      --icon-color: var(--template-bg-dark-80);
      --icon-color-hvr: var(--template-quickicon-color);
    }
  }
}

.new-module {
  display: flex;
  overflow: hidden;
  color: var(--text-color);
  background-color: var(--bg-color);
  border: 1px solid hsl(var(--hue), 50%, 93%);
  border-radius: $border-radius;

  * {
    transition: all .25s ease;
  }

  &-details {
    flex: 1 0;
    padding: 1rem;
  }

  &-title {
    margin-bottom: .25rem;
    font-size: 1rem;
    font-weight: 700;
  }

  &-caption {
    display: flex;
    margin: 0;
    font-size: .875rem;
  }

  &-link {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 2.5rem;
    font-size: 1.2rem;
    background: hsl(var(--hue), 50%, 93%);

    span {
      margin-bottom: 10px;
      color: var(--icon-color);
    }

    .new-module:hover & {
      background: var(--bg-color-hvr);

      span {
        color: var(--icon-color-hvr);
      }
    }
  }
}