/* Leaving, will most likely get deleted */
.container {
  display: grid;
  gap: var(--Spacing-x2);
  grid-template-areas: "year month day";
  grid-template-columns: 1fr 1fr 1fr;
  width: var(--width);
}

.day {
  grid-area: day;
}

.month {
  grid-area: month;
}

.year {
  grid-area: year;
}

/* TODO: Handle this in Select component.
   - out of scope for now.
*/
.day.invalid > div > div,
.month.invalid > div > div,
.year.invalid > div > div {
  border-color: var(--Scandic-Red-60);
}