@import '../Headers/Header_02/header_02.css';
@import "./Filtri/filters_2.css";


#blog-articles .four-col-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.news-stripe .col-content-info {
    gap: 1vw;
    margin-bottom: 0.885vw;
	align-items: flex-end;
}
.news-stripe .col-content-info .info-date {
    white-space: nowrap;
}
.news-stripe .col-content-info > * {
    line-height: 1;
}

.fetaured-article {
	grid-column: span 2;
}
.featured-label {
    position: absolute;
    top: 0.78vw; /* 15 */
    left: 0.78vw; /* 15 */
    z-index: 5;
    background: var(--color_1);
    padding: 0.52vw 0.78vw; /* 10 15 */
    border-radius: 5.16vw; /* 99 */
}

/* Big Laptops - Ok until 1441 px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1920px) {
	.featured-label {
		top: 15px; /* 15 */
		left: 15px; /* 15 */
		padding: 10px 15px; /* 10 15 */
		border-radius: 99px; /* 99 */
	}
}

/* Standard Laptops - Ok until 1281px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1440px) {

}

/* Small Laptops - Ok until 1150px
------------------------------------------------------------------------------------------------*/
    @media screen and (max-width: 1280px) {
		#blog-articles .four-col-grid {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
		.news-stripe .col-content-info {
		    gap: 20px;
		    margin-bottom: 15px;
		}
		.featured-label {
			padding: 10px 15px;
		}		
    }

/* Ok until 993px
------------------------------------------------------------------------------------------------*/
    @media screen and (max-width: 1150px) {

    }

/* Mobile Start ok until 768px
------------------------------------------------------------------------------------------------*/
	@media screen and (max-width: 992px) {
	    .news-stripe .col-content-info {
	        margin-bottom: 10px;
	    }
	}

/* Mobile All
------------------------------------------------------------------------------------------------*/
	@media screen and (max-width: 767px) {
		.blog-filters {
			    display: none;
			}
			
		/* General Preview
		-------------------------------------------------------*/
			.news-stripe .col-content-info {
			    gap: 12px;
			}
	}

/* Mobile Landscape only
------------------------------------------------------------------------------------------------*/
	@media screen and (max-width: 767px) and (orientation: landscape) {

	}

/* Mobile port
------------------------------------------------------------------------------------------------*/
	@media screen and (max-width: 600px) {
		.four-col-grid {
		    grid-template-columns: 1fr;
		}
		.four-col-grid .content-sp {
		    padding: 1.5em .5em;
		}
	}