@property --gradient-angle {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}

.signup {
  display: grid;
  grid-template-columns: 1fr max-content;
  grid-template-rows: fit-content fit-content fit-content;
  gap: 1rem;
}

label {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  color: white;
  font-weight: bold;
}

input[type="email"] {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  border: 0;
  border-radius: 5rem 0 0 5rem;
  outline: 3px solid rgba(255, 255, 255, .35);
  background-color: transparent;
  color: var(--white);
  padding: .75rem 1rem;
}

input[type="email"]::placeholder {
	color: var(--light);
}

button[type="submit"] {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  border-radius: 0 5rem 5rem 0 !important;
}

.label-check {
  grid-row: 3 / 4;
  grid-column: 1 / 3;
  display: grid;
  grid-template-columns: min-content 1fr;
  gap: 1rem;
  align-items: center;
}

.label-check input[type="checkbox"] {
  grid-column: 1 / 2;
}

.label-check label {
  grid-column: 2 / 3;
}

input[type="checkbox"] {
  appearance: none;
  background-color: transparent;
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 2rem;
  height: 2rem;
  border: 3px solid rgba(255, 255, 255, .35);
  border-radius: 0.15em;
  transform: translateY(-0.075em);
}

input[type="checkbox"] {
  /* ...existing styles */
  display: grid;
  place-content: center;
}

input[type="checkbox"]::before {
  content: "";
  width: 1em;
  height: 1em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--primary);
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

#newsletter-message {
  background-color: #f446d3;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  margin-top: 1rem;
}

#newsletter-message.hidden {
  display: none;
}

#newsletter-message.fade-in {
  display: block;
  opacity: 1;
}

ul.latest-events {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}