.swiper-wrapper {
	margin: 0 0 50px 0;
}

.home-articles.swiper-container {
	width: 100vw;
	position: relative;
	left: calc(-100vw / 2 + 100% / 2);
    right: calc(-100vw / 2 + 100% / 2);
	padding: 0;
	background-color: transparent;
	overflow-x: hidden;
}

.home-articles.swiper-container article {
	background-color: white;
	padding: 25px;
	width: 600px;
	height: auto;
}

.swiper-button-next, 
.swiper-button-prev {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    padding: 22px 15px;
    width: 100%;
    border: 1px solid var(--green);
    background-color: var(--green);
    margin-top: 0;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
}

.swiper-button-next:after, .swiper-button-prev:after {
	content: none;
}

.swiper-prev-next {
	display: grid;
	grid-template-columns: 50px 50px;
	grid-gap: 15px;
}

.swiper-button-next span {
	background: url('img/next.svg') no-repeat center;
	background-size: contain;
	
	width: 25px;
    height: 25px;
}

.swiper-button-prev span {
	background: url('img/back.svg') no-repeat center;
	background-size: contain;
	
	width: 25px;
    height: 25px;
}

.swiper-button-next:focus,
.swiper-button-prev:focus {
	border: 1px solid var(--green);
	outline: none;
}

.swiper-button-next:hover, 
.swiper-button-prev:hover {
    border: 1px solid var(--dark_grey);
    background-color: var(--dark_grey);
}

.swiper-button-next:hover:focus, 
.swiper-button-prev:hover:focus {
    border: 1px solid var(--dark_grey);
    background-color: var(--dark_grey);
}

.featured .swiper-prev-next {
	margin-top: 0;
	width: 50%;
	display: flex;
    justify-content: space-between;
	
	position: absolute;
	top: 50%;
	left: 0;
	
	z-index: 2;
	
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);	
}


.featured .swiper-button-next, 
.featured .swiper-button-prev {
	width: 50px;
}

@media screen and (max-width: 1000px) {
	.swiper-wrapper {
		margin: 0 0 50px 0;
	}

	.featured .swiper-prev-next {
		width: 100%;
		top: 30vh;
	}
}

@media screen and (max-width: 900px) {
	.featured .swiper-prev-next {
		width: 100%;
		top: 20vh;
	}
}

@media screen and (max-width: 600px) {
	.home-articles.swiper-container article {
		width: 90%;
	}
}