.future-dates {
    border-top: solid 1px var(--nerd-yellow);
    background: url(../img/brush-1.svg) var(--nerd-black) no-repeat;
    background-size: cover;
    min-height: 50%;
    background-position: center;
    background-repeat: no-repeat;
    padding: 6em;
}
.futdates h2,
.futdates h3,
.timer-wrapper h2 {
	font-weight: bold;
	letter-spacing: 0.05em;
	line-height: 1;
    text-align: center;
    font-size: 4rem;
}
.futdates h3 {
	color: var(--color);
	font-size: 2.5rem;
}
.futdates p {
    text-align: center;
	font-size: 1.2rem;
	margin: 0 auto;
	width: fit-content;
}
.highlight-yellow {
	--color: var(--nerd-yellow);
}
.highlight-yellow p {
	margin-top: 1.25em;
}
.highlight-yellow span {
	color: var(--color);
    font-size: 1.2em;
}
.highlight-yellow {
	background: url('data:image/svg+xml,<svg width="941" height="36" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M940 36V1H1v35" stroke="%23FFBA00" stroke-width="2"/></svg>')
		no-repeat center 11.5rem;
	background-size: 55%;
	padding-bottom: 1rem;
}
.future-dates .futdates .dates {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    gap: 5%;
    max-width: 80%;
}
.future-dates .futdates .dates > a,
.future-dates .futdates .dates > div {
    flex: 1;
    min-width: 25%;
    max-width: 30%;
}

.highlight-red {
	--color: var(--nerd-red);
}
.highlight-green {
	--color: var(--nerd-green);
}
.highlight-yellow-only {
	--color: var(--nerd-yellow);
}
.border-round {
	background-color: var(--nerd-dark-blue);
	border: 2px solid var(--color);
	border-radius: 50px;
	color: white;
	line-height: 1;
	padding: 0.4rem 1.2rem;
}

.cinta-dates {
    height: 2em;
    width: 100%;
    object-fit: cover;
}

@media screen and (max-width: 900px) {
	.highlight-yellow h2 {
		font-size: 2.1rem;
	}
    .highlight-yellow {
        background: none;
    }
	.future-dates .futdates .dates {
        display: block;
    }
}