/*
 * Gebruik nested CSS in je wrapper div: .awcf-acf-repeater-loop-item
 * Meer informatie: https://www.w3schools.com/cssref/sel_nesting.php
 */

.awcf-acf-diy-producten { 	
	& .aw-producten-grid{
		display: flex;
		flex-direction: row;
		gap: 20px;
		flex-wrap: wrap;
		justify-content: flex-start;
		
		& .aw-product-item{

			display: flex;
			flex-direction: column;
			flex: 23% 0 1;
			gap: 10px;	
			
			& .aw-product-image{
				height: 300px;
				width: 300px;
				align-self: center;
				object-fit: contain;
			}
			
			& .aw-product-content{
				display: flex;
				justify-content: space-between;
				flex-direction: column;		
				min-height: 140px;
				
				& .aw-product-title{
					font-weight: 700;
				}
				& .aw-product-button{
					background-color: black;
					border: 1px solid black !important;
					color: #ffffff;
					cursor: pointer;
					width: 100%;
					text-align: center;
					display: inline-flex;
					margin: 0 auto;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					flex-wrap: nowrap;
					padding: 5px 10px;
					border-radius: 10px
				}
			}
		}
	}
} 

@media only screen and (max-width: 1024px) {
	.aw-product-item{
		flex: 48% 0 1 !important;
	} 
}


@media only screen and (max-width: 500px) {
	.aw-product-item{
		flex: 100% 0 1 !important;
	} 
}