:root {
	--color-stop1: #00C070;
	--color-stop2: #54E7B0;
}

@media screen {
	.lights-by-month {
		position: relative;
		width: 320px;
		margin-top: 20px;
		margin-bottom: 70px;
	}

	.lights-by-month .container {
		display: grid;
		grid-template-columns: repeat(12, auto);
		align-items: flex-end;
		justify-content: space-between;
		width: 100%;
		margin: auto;
	}

	.lights-by-month .container.months {
		width: calc(100% - 12px); /* make the months container narrower than the labels so the labels are centered better */
		height: 200px;
	}

	.lights-by-month .container .month {
		position: relative;
		width: 12px;
		background-image: linear-gradient(to top, var(--color-stop1), var(--color-stop2));
		border-radius: 6px;
	}

	.lights-by-month .container .month:nth-child(5),
	.lights-by-month .container .month:nth-child(6),
	.lights-by-month .container .month:nth-child(7),
	.lights-by-month .container .month:nth-child(8),
	.lights-by-month .container .month .half {
		background-image: unset;
		background-color: var(--gray-800);
	}

	.lights-by-month .container .month .half {
		position: absolute;
		right: 0;
		width: 50%;
		height: 100%;
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
	}

	.lights-by-month .container.labels {
		margin-top: 10px;
	}

	.lights-by-month .label {
		width: 20px;
		margin: 0;
		color: var(--gray-500);
		font-size: 0.5rem;
		text-align: center;
		text-transform: uppercase;
	}

	.lights-by-month .key {
		display: grid;
		grid-template-columns: 20px auto;
		grid-column-gap: 16px;
		grid-row-gap: 16px;
		align-items: flex-start;
		width: fit-content;
		max-width: 420px;
		margin: 50px auto;
		color: var(--gray-100);
		font-size: 18px;
	}

	.lights-by-month .visible,
	.lights-by-month .not-visible {
		width: 20px;
		height: 20px;
		margin-top: 6px;
		border-radius: 50%;
	}

	.lights-by-month .visible {
		background-color: var(--color-stop1);
	}

	.lights-by-month .not-visible {
		background-color: var(--gray-800);
	}

	.lights-by-month .description {
		color: var(--gray-400);
	}
}

@media (min-width: 30em) {
	.lights-by-month {
		width: 400px;
	}

	.lights-by-month .container.months {
		height: 250px;
	}

	.lights-by-month .label {
		margin: 0 4px;
		font-size: var(--font-size-xxxs);
	}
}

@media (min-width: 64em) {
	.lights-by-month {
		width: 640px;
		margin-top: 50px;
		margin-bottom: 140px;
	}

	.lights-by-month .container.months {
		width: calc(100% - 24px);
		height: 360px;
	}

	.lights-by-month .container .month {
		border-radius: 10px;
		width: 20px;
		margin-left: 9px;
	}

	.lights-by-month .label {
		width: 36px;
		margin-left: 9px;
		font-size: var(--font-size-xxs);
	}

	.lights-by-month .key {
		align-items: center;
		grid-column-gap: 8px;
		grid-row-gap: 16px;
		font-size: var(--font-size-default);
	}

	.lights-by-month .visible,
	.lights-by-month .not-visible {
		margin-top: 2px;
		width: 20px;
		height: 20px;
	}
}