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

.awcf-acf-blog-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: 15% 0 1;
			gap: 10px;

			& .aw-product-image{
				height: 200px;
				width: 200px;
				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) {
	.awcf-acf-blog-producten .aw-product-item{
		flex: 48% 0 1 !important;
	}
}


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