.post-it {
  padding: 1.875rem;
}

.post-it--green,
.post-it--green:focus,
.post-it--green:active {
  background-color: var(--light-green);
  border: 3px solid var(--light-green);
}

.post-it--green:hover {
  background-color: #fff;
}

.post-it--purple,
.post-it--purple:focus,
.post-it--purple:active {
  background-color: var(--light-purple);
  border: 3px solid var(--light-purple);
}

.post-it--purple:hover {
  background-color: #fff;
}

.post-it__tags {
  display: flex;
  gap: .625rem;
  flex-wrap: wrap;
}

.post-it__tag {
  padding: .25rem .875rem;
  font-size: .75rem;
  font-weight: 700;
  line-height: normal;
  letter-spacing: .0525rem;
  text-align: center;
  width: fit-content;
  height: fit-content;
  border: 2px solid transparent;
  border-radius: 3.125rem;
  text-transform: uppercase;
  background-color: #fff;
  transition: border-color .25s ease-in-out;
  pointer-events: none;
}

.post-it--green:hover .post-it__tag {
  border-color: var(--light-green);
}

.post-it--purple:hover .post-it__tag {
  border-color: var(--light-purple);
}

.post-it:hover .post-it__tag--neutral {
  border-color: var(--neutral);
}

.post-it__headline {
  font-size: 2rem;
  font-weight: 700;
  line-height: 2.25rem;
  margin: 1.25rem 0;
}

@media (max-width: 1024px) {
  .post-it__headline {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

.post-it__subline {
  font-size: 1rem;
}