.magazine-related-items,
.magazine-items {
	@media (min-width: 1024px) {
		display: flex;
		flex-wrap: wrap;
	}
}

.magazine-item-card {
	@media (min-width: 1024px) {
		width: 25%;
		padding: 0 10px;
	}

	color: #ffffff;
	border-radius: 30px 0;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;

	&:last-child {
		margin-right: 0;
	}
}

.magazine-item-image {
	img {
		border-radius: 30px 0 0 0;
		width: 100%;
		object-fit: cover;
		height: 290px;
	}
}

.magazine-item-content {
	padding: 16px 16px 6px 16px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	background: #005F40;
	border-radius: 0 0 30px 0;

	h3 {
		color: #95C11F;
		font-size: 22px;
		line-height: 30px;
		font-weight: bold;
		margin-bottom: 8px;
	}

	p {
		line-height: 26px;
	}
}

.magazine-date-overlay {
	display: flex;
	font-size: 16px;
	line-height: 19px;
	align-items: center;
	margin-bottom: 10px;
}

.magazine-meta-info {
	display: flex;
	flex-wrap: wrap;

	span {
		display: flex;
		font-size: 16px;
		line-height: 19px;
		align-items: center;
		margin-right: 10px;
		margin-bottom: 10px;

		img {
			margin-right: 5px;
		}

		&:last-child {
			margin-right: 0;
		}
	}
}

.magazine-filters {
	padding-top: 55px;

	.filter-row {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		border-bottom: 1px solid #6F6F6F;
		padding-bottom: 20px;


		@media (min-width: 1024px) {
			flex-direction: row;
		}

		.filter-item {
			position: relative;
			width: 200px;

			&:after {
				content: "";
				position: absolute;
				top: 15px;
				right: 18px;
				border-right: 1px solid #6F6F6F;
				border-bottom: 1px solid #6F6F6F;
				display: inline-block;
				padding: 7px;
				transform: rotate(45deg);
			}

			&.magazine-reset-container {
				&:after {
					display: none;
				}
			}
		}

		.magazine-reset-container,
		select {
			font-size: 16px;
			background-image: none !important;
			cursor: pointer;
			width: 200px;
			height: 55px;
			max-width: 100%;
			border: 1px solid #6F6F6F;
		}

		.magazine-reset-container {
			background: #005F40;
			display: inline-flex;
			align-items: center;
			border-radius: 0;
			padding: 18px 16px;

			a {
				color: #ffffff;
				text-decoration: none;
				padding: 0;
			}
		}

		select {
			padding: 0 40px 0 16px;
			color: #6F6F6F;
		}
	}
}

.magazine-content {
	padding-bottom: 50px;

	.pagination {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 30px;

		li {
			margin-bottom: 0;
			padding:0 15px;

			&:before {
				display: none;
			}
		}

		.page-item {
			padding: 0;
		}

		.next {
			img {
				transform: rotate(180deg);
			}
		}
	}
}