#spenden {
  & .spenden {
    margin-top: var(--space-xxl);
  }
}

.spenden {
  list-style: none;
  display: grid;
  grid-gap: var(--space-xl);
  margin: 0;

  @media (--up_to_L) {
    grid-template-columns: 1fr;
  }
  @media (--L_and_up) {
    grid-template-columns: 1fr 1fr;
  }

  & li {
    margin: 0;
  }
}

.spende {
  height: 100%;
  padding-top: var(--space-xl);

  & .inner {
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-card-bg);
    border-radius: var(--space-l);
    padding: var(--space-xl);
  }

  & .avatar {
    display: block;
    height: 120px;
    width: 120px;
    border-radius: 50%;
    border: 10px solid var(--color-card-bg);
    margin: calc(var(--space-xxl) * -1) auto 0;
    background-size: 100%;
    background-repeat: no-repeat;
  }

  & .name {
    padding: var(--space-s) 0 var(--space-m) 0;
    text-align: center;
  }

  & .center {
    flex: 1;
  }

  & .foot {
    margin-top: var(--space-l);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  & .social {
    & a {
      position: absolute;
      top: var(--space-l);
      width: 32px;
      height: 32px;
      display: inline-block;
      background-size: 100%;
      background-repeat: no-repeat;
      outline: 0;
      color: var(--color-neutral-50);
      & svg {
        display: inline-block;
        width: 100%;
        height: 100%;
      }
    }

    & a.twitter {
      left: var(--space-l);
    }

    & a.mastodon {
      left: var(--space-xxl);
    }

    & a.github {
      right: var(--space-l);
    }

    & a.gitlab {
      right: var(--space-xxl);
    }
  }

  & .description {
    & p {
      text-align: left;
      margin: 0;
    }

    & .more {
      display: none;
    }

    &.expanded {
      & .showMore {
        display: none;
      }

      & .more {
        display: unset;
      }
    }
  }
}