@mixin shadow {
	box-shadow: 0px 4px 8px black;
}

.shadow {
	@include shadow
}

.float-on-hover {
	transition: (all 0.25s cubic-bezier(0.2,0.1,0.47,1));
	&:hover {
		transform: (translateY(-10px));
	}
}

article {
	display: flex;
	background-color: $dark;
	border-radius: 10px;
}

article.card {
	height: 420px;
	flex: 1 1 305px;
	flex-direction: column;
	overflow: hidden;

	div.article-info-container, div.article-image {
		overflow: hidden;
		flex: 1;
	}

	div.article-info {
		box-sizing: border-box;
		padding: 25px;
		height: 200px;
		display: flex;
		flex-direction: column;

		a.article-title {
			flex: 2;
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			text-decoration: none;
			color: $font-color;
		}
	}
}

.circle {
	border-radius: 50%;
}

img.small-image {
 width: 400px;
}

.article-link {
	text-decoration: none;
	color: $font-color;
}

article.card-alternate {
	justify-content: space-evenly;
	align-items: center;
	flex-wrap: wrap;
	gap: 40px;

	div {
		padding: 16px;
	}
	img {
		width: 250px;
		height: 250px;
		border-radius: 50%;
	}
	p {
		max-width: 500px;
	}
}