footer {
	background-color: var(--brand-a-bg);
}

footer .columnsContainer {
	display: grid;
	grid-gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(calc(25% - 2rem), 1fr));

	padding: 2rem 1rem 1rem;
}

footer,
footer a,
footer p {
	color: white;
	font-size: .9rem;
	font-weight: 300;
}

footer .footer-title {
	text-transform: uppercase;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

footer a:hover {
	color: var(--brand-a-hover);
	text-decoration: none;
}

/************************ SOCIAL BUTTONS CONTAINER **********************/

.social-media-container {
	margin-top: 1.5rem;
	display: flex;
	gap: 1rem;
}

/* .fab is the social media icons in footer */
.fab {
	font-family: "Font Awesome 5 Brands";
	font-size: 1.6rem;
	color: var(--brand-a);
	transition: color .7s ease;
}

.fab:hover {
	color: var(--brand-a-hover);
	transition: color .7s ease;
}

/************************ SOCIAL BUTTONS CONTAINER **********************/


/************************ COPYRIGHT CONTAINER **********************/
footer .copyrightContainer {
    border-top: 1px solid white;
	padding: 1rem;

	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .6rem;
}


/************************ COPYRIGHT CONTAINER **********************/

@media only screen and (max-width: 1024px) {

	footer .columnsContainer {
		grid-template-columns: repeat(auto-fit, minmax(calc(50% - 2rem), 1fr));
	}

}

@media only screen and (max-width: 500px) {

	footer .columnsContainer {
		grid-template-columns: repeat(auto-fit, minmax(calc(100% - 2rem), 1fr));
		justify-items: center;
	}

	footer .footer-col {
		text-align: center;
	}

	.social-media-container {
		margin-top: 1.5rem;
		display: flex;
		gap: 1rem;
		justify-content: center;
	}

	footer .copyrightContainer {
		justify-content: center;
		text-align: center;
	}
}