body {
			font-size: 100%; /* browser default = 1.0em = 16px ... all other text on homepage is EM ... 100% means full browser text size whis is changeable by user */
			font-family: Verdana, sans-serif; 																						/* as stated here: https://www.w3schools.com/css/css_font.asp */
			margin: 0;
		}

		#gtm_logo {
			position: relative;
			display: flex;
			justify-content: space-between;
			width: 95%;
			margin: 7px auto 10px auto; /* top .. right .. bottom .. left */
		}

		#gtm_logo img
		{
			max-width: 65%;
		}

		#product_cat_block { /* width commented in ... navbar_middle_mega.css ... because it is controlled here */
			width: 95%;
		}

		#navbar_top_inner { /* width commented in ... navbar_top_fixed.css ... because it is controlled here */
			width: 95%;
		}

		h1.section_header, h2.section_header, h3.section_header
		{
			color: #BD2D0C;
			margin: 5px auto 10px 2%; /* top .. right .. bottom .. left */

			font-style: italic;
		}

		.page_description_content
		{
			width: 95%;
			margin: 10px auto 0 auto; /* top .. right .. bottom .. left */
			border: 1px solid orange;
			padding: 0 5px 5px 5px;

		}

		.text_block
		{
			font-size: 17px;
			line-height: 150%;

			font-family: arial;

			border: 1px solid blue;

			margin-top: 10px;
			padding: 15px;
		}

		#text_mounting_opt
		{
			margin-right: 2px;
		}

		.content_flex
		{
			display: flex;
			justify-content: space-evenly;
			padding: 5px;
			border: 1px solid orange;
		}

		.content_flex > div
		{
			max-width: 50%;
		}

		/* ............................................. */

		* {
			box-sizing: border-box;
		}

		#image_block_1, #image_block_2
		{
			display: grid;
			justify-content: space-around; /* THIS is only effective when using: "auto" ... Not! "1fr" */

			/* grid-template-columns: auto auto auto; */ /* set further down */
			/* grid-template-columns: 1fr 1fr 1fr; */
			grid-gap: 30px;

			border: 1px solid blue;

			margin-top: 10px;
			padding: 10px;
		}

		#image_block_1 img, #image_block_2 img
		{
			/* width: 100%; */
			max-width: 100%; /* max-width: 100%; */
			max-height: 475px;
			border: 1px solid red;
		}

		#image_block_2 img { border: none; }

		#image_block_1 { grid-template-columns: auto auto auto auto; }
		#image_block_2 { grid-template-columns: auto; }

		@media only screen and (min-width: 1600px)
		{ /* Bootstrap breakpoints: (down page a bit) https://getflywheel.com/layout/css-breakpoints-responsive-design-how-to/ */

			#gtm_logo, #product_cat_block, #navbar_top_inner, .page_description_content, #footer_inner
			{
				/* .product_cat_block ... is in ... navbar_product_cat.css ... which is set to different width for ... product_detail_page.css */

				width: 70%;
			}
		}

			* {
				box-sizing: border-box;
			}

			.grid-container {
				position: relative;
				width: 95%;
				margin: 0 auto;

				display: grid;

				/* grid-template-columns: auto; */ /* Make the grid smaller than the container */
				grid-template-columns: 1fr 1fr;

				justify-content: space-evenly; /* THIS! is most likely ineffective when using "fr" instead of "auto" */
											   /* see homepage ... where you're having to use "auto" to be able to use: "justify-content" */
				grid-gap: 10px;

				background-color: #d2e2ef;
				padding: 10px;
			}

			@media only screen and (min-width: 495px)
			{
				/* Bootstrap breakpoints: (down page a bit) https://getflywheel.com/layout/css-breakpoints-responsive-design-how-to/ */

				/* Absolutely Magic! ... "fr" locks the width to the proportion of available space ... Always! Based on the Number! of "fr"s stated in */
				/* "grid-template-columns:" as below ... similar (if not exactly the same) as Flex's "Grow" */

				/* The cool! thing is that even when an element is removed using JS ... the remaining elements width-proportion doesn't change */
				/* E.G. 1fr / (1fr 1fr 1fr 1fr) = 20% ... and if you remove say 2 elements ... the remaining 3 still have a width of 20% */

				/* "auto" on the other hand as was used before ... expands the remaining elements to fill 100% of the available space */
				/* after any elements have been removed */

				.grid-container_mobile {
					/* grid-template-columns: auto; */
					grid-template-columns: 1fr 1fr;
				}
			}

			@media only screen and (min-width: 768px) {
				.grid-container_mobile {
					/* grid-template-columns: auto auto; */
					grid-template-columns: 1fr 1fr;
				}
			}

			@media only screen and (min-width: 992px) {
				.grid-container_mobile {
					/* grid-template-columns: auto auto auto; */
					grid-template-columns: 1fr 1fr 1fr;
				}
			}

			@media only screen and (min-width: 1200px) {
				.grid-container_mobile {
					/* grid-template-columns: auto auto auto auto; */
					grid-template-columns: 1fr 1fr 1fr 1fr;
				}
			}

			@media only screen and (min-width: 1350px) { /* Bootstrap's highest is ... 1200px ... according to the above link */
				.grid-container_mobile {
					/* grid-template-columns: auto auto auto auto auto; */
					/* grid-template-columns: 1fr 1fr 1fr 1fr 1fr; */
					grid-template-columns: 1fr 1fr 1fr 1fr;
				}
			}

			@media only screen and (min-width: 1600px) { /* Adjust the screen width at a separate break point here */
				.grid-container_mobile {
					width: 70%;
				}
			}

			.grid-container > div {
				background-color: rgba(255, 255, 255, 0.8);
				text-align: center;
				padding: 20px 10px;
									font-size: 1em;
				border: 1px solid red;

				transition: 0.1s;
			}

			.grid-container img {
				padding: 5%;
				border: 1px solid green;

				/* Stops image making parent DIV larger ... becomes effective only when natural image size is larger than calculated via CSS */
				width: 100%;
			}

			.product_title {
				text-decoration: underline;
				margin-bottom: 10px;
			}