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

.new-module {
  display: flex;
  overflow: hidden;
  color: hsl(var(--hue),30%,40%);
  background-color: hsl(var(--hue), 60%, 97%);
  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: hsl(var(--hue), 30%, 40%);
    }

    .new-module:hover & {
      background: var(--template-bg-dark);

      span {
        color: $white;
      }
    }
  }
}