@import '../../../styles/colors.scss';

.card {
  border-radius: 4px;
  padding: 25px;

  position: relative;
  background: $overlay-background-color;

  transition: ease 0.2s;

  display: flex;
  flex-direction: column;
  gap: 15px;

  &:hover {
    color: white;
    background: $primary-main;

    .icon,
    a {
      color: inherit;
    }
  }

  button {
    transition:
      color 0s,
      background-color 0.2s;
  }

  a {
    transition: none;
  }
}

.icon {
  color: $primary-main;
  font-size: 25px;
  line-height: 1;

  height: 25px;
  width: 25px;
}

.title {
  display: flex;
  flex-direction: row;
  grid-gap: 10px;
  align-items: center;

  font-weight: bold;
  font-size: 20px;
}

.description {
  font-size: 14px;
  font-weight: 500;
}

.actions {
  margin-top: auto;
  text-align: right;
}
