[Summary view] [Print] [Text view]

   1  .new-modules {
   2    .card-columns {
   3      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
   4    }
   5  }
   6  
   7  .new-module {
   8    display: flex;
   9    overflow: hidden;
  10    color: hsl(var(--hue),30%,40%);
  11    background-color: hsl(var(--hue), 60%, 97%);
  12    border: 1px solid hsl(var(--hue), 50%, 93%);
  13    border-radius: $border-radius;
  14  
  15    * {
  16      transition: all .25s ease;
  17    }
  18  
  19    &-details {
  20      flex: 1 0;
  21      padding: 1rem;
  22    }
  23  
  24    &-title {
  25      margin-bottom: .25rem;
  26      font-size: 1rem;
  27      font-weight: 700;
  28    }
  29  
  30    &-caption {
  31      display: flex;
  32      margin: 0;
  33      font-size: .875rem;
  34    }
  35  
  36    &-link {
  37      display: flex;
  38      align-items: flex-end;
  39      justify-content: center;
  40      width: 2.5rem;
  41      font-size: 1.2rem;
  42      background: hsl(var(--hue), 50%, 93%);
  43  
  44      span {
  45        margin-bottom: 10px;
  46        color: hsl(var(--hue), 30%, 40%);
  47      }
  48  
  49      .new-module:hover & {
  50        background: var(--template-bg-dark);
  51  
  52        span {
  53          color: $white;
  54        }
  55      }
  56    }
  57  }