/**
 * CSS files with the .module.css suffix will be treated as CSS modules
 * and scoped locally.
 */

.title {
  font-size: rem(34px);
  font-weight: 900;

  @media (max-width: $mantine-breakpoint-sm) {
    font-size: rem(24px);
  }
}

.description {
  max-width: rem(600px);
  margin: auto;

  &::after {
    content: '';
    display: block;
    background-color: #674ad6;
    width: rem(45px);
    height: rem(2px);
    margin-top: var(--mantine-spacing-sm);
    margin-left: auto;
    margin-right: auto;
  }
}

.card {
  border: rem(1px) solid light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
}

.cardTitle {
  &::after {
    content: '';
    display: block;
    background-color: #674ad6;
    width: rem(45px);
    height: rem(2px);
    margin-top: var(--mantine-spacing-sm);
  }
}

.social_card {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  transition:
    transform 150ms ease,
    box-shadow 100ms ease;
  padding: var(--mantine-spacing-xl);
  padding-left: calc(var(--mantine-spacing-xl) * 1);
  margin-bottom: 1rem;
  background-color: #000;

  @mixin hover {
    box-shadow: var(--mantine-shadow-md);
    transform: scale(1.02);
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: rem(6px);
  }
}
