.title
{
    max-width: 900px;
	text-align: center;
    padding: 30px 0 20px;
}

.title h1
{
    font-family: var(--font-primary);
	font-size: 2.5rem;
    font-weight: 900;
	background: linear-gradient(var(--primary-accent-1), var(--primary-accent-2), var(--primary-accent-3), var(--primary-accent-4));
	-webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 1rem;
}

.title p
{
    font-size: 1.15rem;
    color: var(--text-muted);
    margin: 0 auto 2rem;
    line-height: 1.6;
}

/* --- Cards --- */

.card
{
	background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.5rem;
    transition: border-color 0.2s;
}

.card:hover
{
    border-color: var(--secondary-accent);
}

.card-title
{
    color: var(--text);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.card-title i
{
	background: linear-gradient(var(--secondary-accent-1), var(--secondary-accent-2), var(--secondary-accent-3), var(--secondary-accent-4));
	-webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.card p
{
	color: var(--text-muted);
}


@media (width < 1000px)
{
	.title .uk-first-column
	{
		width: 200px;
		padding-left: 0;
	}
}

@media (width < 800px)
{
	.title h1
	{
		font-size: 2rem;
	}
}

@media (width < 700px)
{
	.title h1
	{
		font-size: 1.5rem;
	}

	.title .uk-first-column
	{
		width: 100%;
	}

	.title p
	{
	    font-size: 1rem;
	}
}