body {
			font-size: 100%; /* browser default = 1.0em = 16px ... all other text on homepage is EM ... 100% means full browser text size which is changeable by user */
			font-family: Verdana, sans-serif; 																						/* as stated here: https://www.w3schools.com/css/css_font.asp */
			margin: 0;
		}
		#gtm_logo {
			width: 97%;
			position: relative;
			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	{
			color: #b00202;
			margin: 10px auto 0 2%; /* top .. right .. bottom .. left */
			font-style: italic;
		}
		h2.section_header, h2.section_header_2	{
			color: #da6702;
			margin: 19px auto 0.5% 3%; /* top .. right .. bottom .. left */
			font-size: 26px;
			font-style: italic;
		}
		h2.section_header_2	{
			margin-left: 1%;
			margin-bottom: 17px;
		}
		h3.section_header	{
			color: #18017d;
			margin: 14px auto 0 2%; /* top .. right .. bottom .. left */
			font-size: 20px;
			font-style: italic;
		}
		.page_description_content	{
			width: 95%;
			margin: 0 auto 0 auto; /* top .. right .. bottom .. left */
			border: 1px solid orange;
			padding: 0 5px 5px 5px;
		}
		p	{
			/* border: 1px solid rgb(91, 220, 26); */
			margin: 5px 7px 7px 7px; /* top .. right .. bottom .. left */
		}
		ul {
			/* border: 1px solid orange; */
			margin-top: 7px; /* the default top margin is way to big */
		}
		.text_block	{
			/* font-size: 17px; */
			line-height: 150%;
			font-family: arial;
			/* border: 1px solid blue; */
			/* margin-top: 10px; */
			padding: 0 15px 10px 15px; /* top .. right .. bottom .. left */
		}
		#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_figures img {
			width: 100%;
		}
		.image_block {
			display: grid;
			grid-template-columns: 1fr 1fr; /* this is also set in @media further down */
			grid-gap: 7px;

			padding: 5px;
      /* border: 1px solid blue; */
		}
    #block_1 {
      margin-top: 0;
    }
    #block_2 {
      margin-top: 10px;
    }
    .product_title {
			text-decoration: underline;
			margin-bottom: 10px;
		}
    #grid_container_images_parent
    {
      width: 95%; /* set this to 95% the same as "page_description_content" */
      margin: 0 auto 0 auto; /* top .. right .. bottom .. left */
      padding-top: 10px;
      background-color: #d2e2ef;
      /* border: 3px solid green; */
    }
    #select_layout_instruction { /* this is the text above the images */
      font-size: 1.2em;

      /* text-align: center; */
      margin-left: 17%;

      margin-top: 0; /* needs to be 0 else the <p> default margin pushes parent <div> downwards which results in white space above parent <div> */

      text-decoration: underline;
      color: #6E4319;
      /* border: 1px solid green; */
    }
		.grid_container	{
      display: grid;

			/* width: 95%; */ /* 23-06-2024: grid container is now inside "grid_container_images_parent" further down */
      padding: 10px;
			margin: 0 auto;

			grid-template-columns: 0.89fr 1fr; /* this is also set in @media further down */
			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;
      /* border: 3px solid green; */
		}
		.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 {
			width: 100%;
      padding: 3%;
			/* border: 1px solid green; */
		}
    figure {
      margin: 0;
      border: 1px solid #C0C0C0;
    }
    figcaption {
			text-align: center;
			padding: 0 0 3px 0; /* note that "auto" is not a valid value for padding, hence I'm using 0 instead */
			margin: auto 7px auto 7px; /* top .. right .. bottom .. left */
			color: rgb(118, 0, 118);
			/* border: 1px solid red; */
		}
    @media only screen and (min-width: 700px) {
      .grid_container {
        grid-template-columns: 0.89fr 1fr 1fr;
      }
      .image_block {
        grid-template-columns: 1fr 1fr 1fr 1fr; /* this is also set in @media further down */
        grid-gap: 12px;
      }
    }
    @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, #grid_container_images_parent {
				/* ".product_cat_block" is in "navbar_product_cat.css" which is set to different width for "product_detail_page.css" */
				width: 70%;
			}
		}