@import "@/styles/variables";
@import "@/styles/mixins";

.backgroundContainer {
  background: linear-gradient(
    0deg,
    rgba(36, 43, 72, 0.6),
    rgba(36, 43, 72, 0.6)
  );
  color: $white;

  .container {
    padding-top: 6.25rem;
    padding-bottom: 6.25rem;

    .cardContainer {
      padding: 3.75rem 0;

      .card {
        background: $white;
        box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        padding: 2rem;
        color: $black;
        height: 100%;

        h4 {
          @include h4;
          word-break: break-all;
          padding-bottom: 1rem;
          &:before {
            content: "";
            float: left;
            background: $blue;
            width: 0.375rem;
            height: 1.3125rem;
            margin: 0.4375rem $hl-10 0.4375rem 0;
          }
        }
        .description {
          @include p1;
          opacity: 0.8;
        }
      }
    }

    a {
      color: $white;

      &:hover {
        color: $white;
      }
    }
  }
}