/* TODO list: photo gallery container */
[id*="photo"] {
   display: block;
   list-style: none;
}

#photo-gallery-container {
   font: 16px/1.5 Georgia, serif;
   max-width: 600px;
}

/* item-list with text */
.comments-about-application-property {
   padding: 20px 10px 30px 10px;
}

/* figure */
.container-image {
   width: 100%;
   max-width: 600px;
   padding: 2.83% 2.83% 9.1% 10%; /* 17px 17px 55px 60px;*/
   border: 10px double  hsl(0, 0%, 26%);
   background-clip: padding-box;
   -webkit-background-clip: padding-box;
}

.positionRelative {
   position: relative;
}

/* position absolute  offsetli.boxMultiplyShadows */
.onDate {
   position: absolute;
   color: ivory;
   writing-mode: vertical-lr;
   text-orientation: upright;
   top: 7%;
   left: 5%;
   line-height: 1.2;
   z-index: 1;
}

/* position absolute  offsetfigure.container-image.backdrop */
.geographical-location {
   position: absolute;
   color: ivory;
   bottom: 4%;
   line-height: 1.2;
}

.backdrop {
   background-color: #3e3434;
   position: relative;
}

.backdrop-1 {
   background-image: 
   linear-gradient(to right,transparent 3%, darkkhaki 3% 4%, darkkhaki 4% 5%, hsl(48, 38%, 95%) 5% 6%, maroon 6% 7%,darkslategray 7% 8%,transparent 8%),
   linear-gradient(to top,  hsl(48, 38%, 72%) 4%, darkkhaki 4% 6%, maroon 6% 8%,darkslategray 8% 10%, hsl(48, 38%, 72%) 10%);
   background-color: hsl(48, 38%, 72%);
}

.backdrop-2 {
   background-image: 
   linear-gradient(to right,transparent 3%, darkkhaki 3% 4%, darkkhaki 4% 5%, hsl(48, 38%, 95%) 5% 6%, maroon 6% 7%,darkslategray 7% 8%,transparent 8%),
   linear-gradient(to top,  hsl(49, 16%, 55%) 4%, darkkhaki 4% 6%, maroon 6% 8%,darkslategray 8% 10%, hsl(49,16%,55%) 10%);
   background-color: hsl(48, 38%, 72%);
   isolation: isolate;
}

/* images */
.original {
   max-width: 500px;
}

.difference {
   max-width: 500px;
   mix-blend-mode: difference;
}

.hard-light {
   max-width: 500px;
   mix-blend-mode: hard-light;
}

/* TODO list: blending modes container */
[id="blending-modes"] {
   display: block;
   list-style: none;
}

[id="blending-modes"] li {
   margin: 0 0 1rem 0;
}

#linear-gradient {
   position: relative;
   padding: 20px;
   background: linear-gradient(to bottom,#FC600A 10%, #66B032 20%,#8601AF 40%, transparent), linear-gradient( to bottom,#FE2712,#FEFE33 50%,#0247FE 100%), beige;
}

.type-of-modes p {
   color: whitesmoke;
   border-width: 0.2rem 0.5rem;
   border-color: whitesmoke;
   border-style: dashed double;
   padding: 1.4rem;
   font: 900 1.5rem sans-serif;
}

#background-blend {
   background-color: #093426; /*#b2d732;*/
   padding: 20px;
}

#background-blend p {
   background: linear-gradient(to bottom,#FC600A 10%, #66B032 30%,#8601AF 40%), linear-gradient( to top,#FE2712,#FEFE33 50%,#0247FE 100%), beige;
   background-origin: border-box;
   -webkit-background-origin: border-box;
   background-clip: padding-box;
   -webkit-background-clip: padding-box;
   background-blend-mode: difference;
}

#color-text-blended {
   background: linear-gradient(to bottom,#FC600A 10%, #66B032 30%,#8601AF 40%, transparent), linear-gradient( to top,#FE2712,#FEFE33 50%,#0247FE 100%), beige;
   padding: 20px;
   background-origin: border-box;
   -webkit-background-origin: border-box;
   background-blend-mode: difference;
}

#color-text-blended p {
   mix-blend-mode: difference;
}

#background-clipped {
   padding: 20px;
   background-color: #093426;
   background-origin: border-box;
   -webkit-background-origin: border-box;
}

#background-clipped p {
   background: linear-gradient(90deg,#FC600A 10%, #66B032 30%,#8601AF 40%, transparent), linear-gradient( -90deg,#FE2712,#FEFE33 50%,#0247FE 100%), beige;
   background-origin: border-box;
   -webkit-background-origin: border-box;
   background-clip: text;
   -webkit-background-clip: text;
   color: hsla(0,0%,0%,0.1); /* it is necessary to be transparent.  */
}

@media (min-width: 300px) and (max-width: 570px) {
   .geographical-location {
      position: absolute;
      color: ivory;
      left: 10%;
      bottom: 2.5%;
      line-height: 1.2;
      z-index: 1;
   }
}

@media (min-width: 370px) and (max-width: 400px) {
   /* position absolute  offsetfigure.container-image.backdrop */
   .onDate {
      position: absolute;
      color: ivory;
      writing-mode: vertical-lr;
      text-orientation: upright;
      top: 9%;
      left: 5%;
      line-height: 1.2;
      font-size: 15px;
   }

   .type-of-modes p {
      color: whitesmoke;
      border: 0.5rem whitesmoke;
      border-style: dotted double;
      padding: 1.4rem;
      font: 900 1.3rem sans-serif;
   }
}

@media (min-width: 300px) and (max-width: 369px) {
   .geographical-location {
      position: absolute;
      color: ivory;
      left: 10%;
      bottom: 2.5%;
      line-height: 1.2;
      z-index: 1;
      font-size: 15px;
   }
   /* position absolute  offsetfigure.container-image.backdrop */
   .onDate {
      position: absolute;
      color: ivory;
      writing-mode: vertical-lr;
      text-orientation: upright;
      top: 8.5%;
      left: 5%;
      line-height: 1.2;
      font-size: 13px;
   }

   .type-of-modes p {
      color: whitesmoke;
      border: 0.5rem whitesmoke;
      border-style: dotted double;
      padding: 1.4rem;
      font: 900 1.1rem sans-serif;
   }
}