.articles {
    position: relative;
    padding: 50px 0px;
    z-index: 1;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        width: 100vw;
        height: 100%;
        transform: translateX(-50%);
        background: #fff;
        z-index: -1;
    }

    & .title {
        padding-bottom: 30px;
    }
}

.article-wrapper {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 25px;
	row-gap: 25px;    

	& .section {
		display: flex;
		flex-direction: column;
		gap: 16px;
		position: relative;
		z-index: 1;

		& .bg-image {
			display: flex;
			height: 100%;
			width: 100%;
			min-height: 200px;
			max-height: 250px;
			border-radius: 15px;
			overflow: hidden;
            object-fit: fill;
            object-position: center;
		}

		& .article-social {
			position: absolute;
			left: 20px;
			bottom: 15px;
			padding: 16px;
			background-color: #f6cc2f;
			border-radius: 10px;
			overflow: hidden;

			& .article-link {
				color: #000;
			}
		}
	}
}

@media screen and (max-width: 1200px) {
	.article-wrapper {
		grid-template-columns: repeat(3, 1fr);

		& .section {
			& .bg-image {
				min-height: 250px;
				max-height: 250px;
			}
		}
	}
}

@media screen and (max-width: 900px) {
	.article-wrapper {
        column-gap: 16px;
        row-gap: 16px;

		& .section {
			& .bg-image {
				min-height: 150px;
				max-height: 150px;
			}
		}
	}
}

@media screen and (max-width: 600px) {
	.article-wrapper {
		grid-template-columns: repeat(2, 1fr);

		& .section {
			& .article-social {
				width: auto;
                font-size: 12px;
                padding: 12px;
                left: 10px;
                bottom: 10px;
			}
		}
	}
}