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

.backgroundContainer {
  color: $black;
  background-color: $grey-light;

  h1 {
    text-align: center;
    margin-bottom: $hl-8;
  }
  .container {
    padding-top: 6.25rem;
    padding-bottom: 6.25rem;

    .cardContainer {

      .card {
        background-color: $white;
        box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        padding: 2rem;
        color: $black;
        height: 100%;
        transition: all 0.25s linear;
        &:hover {
          transform: translateY(-1rem);
        }

        .image {
          height: 4rem;
          width: 4rem;
          border-radius: 50%;
          overflow: hidden;
          background-color: $grey;
          img {
            height: 100%;
            width: 100%;
          }
        }

        h4 {
          @include h4;
          word-break: break-all;
          padding-bottom: 0.5rem;
        }
        .description {
          @include p1;
          color: $font-color-8;
          opacity: 0.8;
        }
      }
    }
  }
}