.latest-articles {
	.latest-articles__title {
		font-size: 20px !important;
		font-weight: 700;
	}

	#latest-articles-grid {
		.latest-articles__card {
			overflow: hidden;
			padding-bottom: 30px 30px 0 30px;
			border-radius: 20px;
			border: 1px solid var(--deep-steel, #1e2939);
			background: linear-gradient(
				127deg,
				var(--oxford-blue, rgba(16, 24, 40, 0.3)) 0%,
				rgba(8, 12, 20, 0.3) 50%,
				var(--oxford-blue, rgba(16, 24, 40, 0.3)) 100%
			);
			transition: 0.3s all;

			.latest-articles__img-wrap {
				position: relative;

				&:before {
					content: "";
					width: 100%;
					height: 100%;
					position: absolute;
					bottom: 0;
					left: 0;
					background: linear-gradient(
						0deg,
						var(--black, #000) 0%,
						rgba(0, 0, 0, 0.3) 50%,
						rgba(0, 0, 0, 0) 100%
					);
				}

				img {
					width: 100%;
					height: 200px;
					object-fit: cover;
					object-position: center;
				}
			}

			.latest-articles__body {
				padding: 30px;

				.latest-articles__post-title {
					margin-bottom: 0;

					a {
						font-weight: 400;
						text-decoration: none !important;
					}
				}

				.latest-articles__highlight {
					margin: 30px 0;
				}
			}

			.button-wrapper {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				border-top: 1px solid var(--deep-steel, #1e2939);
				padding: 30px 0;

				.latest-articles__btn {
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					gap: 8px;
					color: var(--electric-purple) !important;
					font-weight: 600;
					padding: 0 !important;

					i {
						margin-top: 2px;
					}
				}
			}

			&:hover {
				box-shadow: 0 0 20px 0 var(--neon-violet, #c27aff);

				.button-wrapper {
					.latest-articles__btn {
						color: var(--neon-violet, #c27aff) !important;
					}
				}
			}
		}
	}
	.latest-articles__load-more {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 8px;
		color: var(--electric-purple) !important;
		font-weight: 600;
		width: 100%;
		max-width: 360px;
		padding: 10px;
		border-radius: 10px;
		border: 1px solid var(--electric-purple, #9810fa);
		background: rgba(6, 8, 15, 0.5);
		font-size: 14px;
		color: var(--electric-purple);
		font-weight: 600;
		line-height: 20px;
		transition: 0.3s all;

		&:hover {
			color: var(--neon-violet) !important;
			border-color: var(--neon-violet);
			box-shadow: 0 0 5px 0 var(--neon-violet, #c27aff);
		}

		i {
			margin-top: 2px;
		}
	}
}