.dashboard-resources {
  .resources {
    @include dynamic-grid;

    .resource-card {
      background: #d1f5eb;
      border-radius: rem-calc(4);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: $line-height * 2 $line-height $line-height;
      position: relative;
      text-align: center;

      &.alert {
        background: #feeaeb;

        &::before {
          color: #fb9497;
          content: "\74";
        }
      }

      &::before {
        border: 2px solid;
        border-radius: rem-calc(40);
        color: #00cb96;
        content: "\6c";
        font-family: "icons";
        font-size: rem-calc(20);
        height: rem-calc(36);
        position: absolute;
        right: 12px;
        top: 12px;
        width: rem-calc(36);
      }

      .label {
        left: 0;
        position: absolute;
        top: 20px;
      }

      h4 {
        margin-top: $line-height;
      }

      .button {
        background: #00cb96;
        color: #000;
        font-weight: bold;
      }
    }
  }
}
