#wrap { 
  max-width: 960px; 
  position: relative; 
  margin: auto; 
  --wrap-width:960px; 
  } 
  #img7 { 
  width: 20% 
  } 
  #img7 { 
  float: left; 
  } 
  #para1 { 
  float: left; 
  width: 60%; 
  margin-left: 10%; 
  } 
  ul.page-list { 
 
  } 
  .page-list li{ 
      font-size: 1.2rem;
      font-weight: 600;
      } 
  .bridge { 
  background-color: #593e2d; 
  color: white; 
  font-size: 2rem; 
  font-weight: 600; 
  padding: .5rem; 
  padding-left: 20%; 
  } 
  .bottom-section { 
  position: relative; 
  } 
  .clear { 
  clear: both; 
  } 
  #img6, #img1, #img2, #img3, #img4, #img5 { 
  display: none; 
  } 
   
  @media only screen and (min-width: 650px) { 
  #img7 { 
  width: 20% 
  } 
  #img6 { 
  display: block 
  } 
  #img1, #img2, #img3, #img4, #img5 { 
  display: inline; 
  } 
  #img6 { 
  position: absolute; 
  top: -4rem; 
  left: 2rem; 
  width: 25%; 
  z-index: 10; 
  } 
  .bridge { 
  padding-left: 50%; 
  } 
  #para1 { 
  width: 40%; 
  } 
  .para2 { 
  margin-left: 30%; 
  width: 50%; 
 margin-top: 1rem;
  } 
  #para1, .para2, .para3 { 
  font-size: 1.2rem; 
  } 
  .bottom-image { 
  border: thick solid black; 
  filter: drop-shadow(6px 6px 5px rgba(0, 0, 0, 0.521)); 
  } 
  .bottom-note { 
  position: relative; 
  top: calc(var(--wrap-width) / -12); 
  } 
  .page-list { 
  float: left; 
  width: auto; 
  margin-left: 10%; 
  } 
  #img5 { 
  z-index: 1; 
  float: left; 
  width: 35%; 
  } 
  #img1 { 
  z-index: 2; 
  position: relative; 
  left: 20%; 
  width: 35%; 
  } 
  #img4 { 
  z-index: 3; 
  position: relative; 
  left: 13%; 
  width: 25%; 
  } 
  #img2 { 
  z-index: 1; 
  width: 20%; 
  position: relative; 
  left: 10%; 
  } 
  #img1 { 
  top: calc(var(--wrap-width) / -11); 
  } 
  #img4 { 
  top: calc(var(--wrap-width) / -9); 
  } 
  #img2 { 
  top: calc(var(--wrap-width) / -13); 
  } 
  } 
   
  @media only screen and (min-width: 800px) { 
  .para3 { 
  margin-top: 40px; 
  } 
  #img1 { 
  top: calc(var(--wrap-width) / -7); 
  } 
  #img4 { 
  top: calc(var(--wrap-width) / -5); 
  } 
  #img2 { 
  top: calc(var(--wrap-width) / -9); 
  } 
  } 
   
  @media only screen and (min-width: 850px) { 
  .para3 { 
  margin-top: 60px; 
  } 
  #img1 { 
  top: calc(var(--wrap-width) / -8; 
  } 
  #img4 { 
  top: calc(var(--wrap-width) / -7; 
  } 
  #img2 { 
  top: calc(var(--wrap-width) / -10); 
  } 
  } 
   
  @media only screen and (min-width: 900px) { 
  .para3 { 
  margin-top: 90px; 
  } 
  #img1 { 
  top: calc(var(--wrap-width) / -7); 
  } 
  #img4 { 
  top: calc(var(--wrap-width) / -6.5); 
  } 
  #img2 { 
  top: calc(var(--wrap-width) / -8); 
  } 
  .bottom-note { 
  top: calc(var(--wrap-width) / -8); 
  } 
  }