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;
		}
    h2.section_header	{
			color: #da6702;
		}



		.page_description_content	{
			width: 95%;
			margin: 0 auto 0 auto; /* top .. right .. bottom .. left */
			border: 1px solid orange;
			padding: 0 5px 5px 5px;
		}
		#sloping_holder_coffee {
			display: flex;
			justify-content: center;
			margin: 5px;
			padding: 20px;
			border: 1px solid blue;
		}
		.page_description_content img	{
			width: 75%;
		}



		.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;
				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;

        width: 95%;
				margin: 0 auto;
        padding: 10px;

        /* border: 2px dashed rgb(72, 177, 37); */
				background-color: #d2e2ef;
			}
			@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 {

        display: flex;
        flex-direction: column;

				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%; */
				max-width: 100%;
			}



      .image_div {
        flex-grow: 1;

        display: flex;
        flex-direction: column;
        justify-content: center;

        border: 1px solid green;
        /* height: 100%; */
        padding: 10px;
      }
			.product_title {
				text-decoration: underline;
				margin-bottom: 10px;
			}
      .size_range {
        color: #137B40;
        font-size: 13px;
        padding-bottom: 10px;
        text-decoration: underline;
        margin-top: 5px;
      }
      .price_from {
        color: #DD8929;
        font-size: 13px;
        font-weight: 600;
        font-style: italic;
        padding-bottom: 10px;
      }
      .purchase_details {
        color: #8e1c2f;
        font-size: 13px;
        font-weight: 600;
      }
      .purchase_details a:hover {
        color: #aa1656;
      }
      @media only screen and (min-width: 1200px) {
        .size_range {
          font-size: 17px;
        }
        .price_from {
          font-size: 15px;
        }
        .purchase_details {
          font-size: 15px;
        }
      }