/* css about  */



/*  *****************   *** from Martin2.css   here for reference  ************************
				.mainDiv 
					{
					grid-area:main;
					max-height:100%;
					max-width:100vw;
					}
	***************************************************************************************
*/


.mainDiv {
	display:grid;
	grid-template-columns: minmax(10vw, 1fr) minmax(10vw, 1.2fr);
	grid-template-rows: minmax(0, 1fr);	/* */
	grid-gap: 3vw;
	grid-template-areas: 'areaPhoto  areaText';
	justify-items: center; 
	align-items:center;
	justify-content:center;
	align-content:center;
	background-image:linear-gradient(to right, rgba(18,6,18, .9), rgba(244,181,74, .9)); 	 /*	*/
/*	background-image:linear-gradient(to right, #100909, #939590); 	 /*	*/
	color:#eef;
	border-radius: 20px;
	padding-right:20px;
/*	background-color: pink;		/* For debug only  */
		}


	.photoDiv {
				max-height: 65vh;	/*  */
				max-width:100%;
				grid-area:areaPhoto;
/*				background-color:yellow;   /*  For debug only  */
				}
		
		.photo {
			display:block;
			max-height:100%;
			max-width:100%;			/*		*/
			overflow:hidden;
/*			object-fit:contain;		/*  doesn't seem to work */
			border-radius:10px;
			}			

		
	
	.text {
		max-height:100%;		/* must give a height here (not max-height)for scroll (overflow) to work on paragraph. 
								HOWEVER if I put overflow statement  in this section then I can use max-height.
								Max-height here will let justify center things  */

		padding:2vw 5px 2vw 0;
		grid-area:areaText;
/*		background-color: green;		/* For debug only  */
		overflow-y:auto;
		}
	
	.text p {
/*			background-color:brown;   /* For debug only  */
			}
	
/*   *********************  Responsive  Design ***************************** */
@media screen and (max-width: 800px)
{
.mainDiv 
	{
		grid-template-columns: minmax(0, 1fr);	/*	*/
		grid-template-rows: minmax(10vh, 1fr) minmax(10vh, 1fr); 
		grid-template-areas: 'areaPhoto'	
							 'areaText';
		grid-gap:1vh;
		background-image:linear-gradient(to bottom,rgba(18,6,18, .9), rgba(244,181,74, .9)); 	 /*	*/

/*		background-color:red;   /* For debug only  */
	}  /* end mainDiv */


	.photoDiv {
				max-height: 40vh;
				max-width: 100%;
				grid-area:areaPhoto;
/*				background-color:blue;	/* For debug only  */
			}

			
		.photo {display:block;
				max-width:100%;	
				max-height:100%;
				overflow:hidden;
				}			
		
	.text {
			padding: 15px;;
/*			background-color: dodgerblue;		/* For debug only  */
		}
}	/* end @ Media */