/* CSS Document */

.gallery-thumnail{
	display: flex;
	flex-direction: row;
	gap:10px;
	margin-bottom: 20px;
}

.mainImg{
	width: 100%;
	min-width: 700px;;
}


.subImg {
    width: 240px;
    align-content: flex-start;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.subImg li {
    width: 100%;
}

.subImg li img {
    width: 100%;
    height: auto;
	border: 1px solid #ccc;
	cursor: pointer;
}

.subImg li img:hover {
	box-shadow: 0 0 3px #333;
}



@media(max-width: 1100px){
	
	.mainImg {
		min-width: calc(100% - 300px);
	}
	
	.modaal-content-container {
		padding: 0 20px;
	}
	
}

@media(max-width: 800px){
	
	.product-detail-wrap {
	    flex-direction: column;
		gap: 20px;
	}
	
	.gallery-thumnail {
    	flex-direction: column;
	}
	
	.subImg {
		grid-template-columns: repeat(5, 1fr);
		width: 100%;
	}
	
	
}


@media(max-width: 600px){
	
	
	
	.modaal-content-container {
        padding: 0 10px;
    }
	
	.modaal-content-container h4 {
		font-size: 1.5rem;
        line-height: 1.5;
        padding-right: 20px;
	}
	
	.subImg {
		grid-template-columns: repeat(4, 1fr);
		width: 100%;
	}
}