.calendar {
	margin: 0 0 $spacing-2xl;

	&__items {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
		grid-column-gap: $grid-gutter-large;
		list-style: none;
		padding: 0;
		margin: 0 0 $spacing-sm;
	}

	&__item {
		display: flex;
		gap: $spacing-sm;
		align-items: flex-start;
		border-top: 1px solid $grey--borders;
		padding: $spacing-sm 0 $spacing-xs;
	}

	&__date {
		min-width: 2.5em;
		text-align: center;
	}

	&__month {
		display: block;
		background: $secondary;
		padding: 0 $spacing-2xs;
		@include typescale('xs');
	}

	&__number {
		display: block;
		background: $grey--lightest;
		padding: $spacing-2xs;
		@include typescale('lg');
		font-weight: bold;
	}

	&__desc {
		flex: 1 1 auto;
		@include typescale('sm');
		@include line-height('compact');
		margin: 0;
	}

	&__actions {
		justify-self: flex-end;
	}

	&__action {
		display: block;
		@include typescale('xl');
		text-decoration: none;
	}
}