.redevelopment {
  display: flex;
  flex-wrap: wrap;
  background-color: #bfbbbb;
  text-align: center;
  font-family: Helvetica;
}

.redevelopment > div {
  margin: 1px 1px 1px 5%;
  text-align: center;
  font-size: 17px;
  }
 .topic_container1, .topic_container2, .topic_container3, .topic_container4, .topic_container5, .topic_container6,.topic_container7,.topic_container8 {
       position: relative;
       text-align: center;
       color: black;
       font-family: Helvetica;
 }
 .topic1, .topic2, .topic3, .topic4, .topic5, .topic6,.topic7,.topic8 {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%); 
 }
 

.view1{
  position: absolute;
  top: 73%;
  left: 48%;
  transform: translate(-50%, -50%); 
  color: white;
  font-family: Helvetica;
 }

.img_box {
    width: 250px;
    height: 300px;

}

/* Extra small devices (phones, 250px and down) */
@media only screen and (max-width: 280px) {
.redevelopment {
  padding: 1px 1px 1px 10%;
}

.redevelopment > div {
  margin: 10px ;
  text-align: center;
  font-size: 17px;
  }
  
  .img_box {
    width: 190px;
    height: 240px;

}
   }


/* Extra small devices (phones, 450px and down) */
@media only screen and (min-width: 281px) and (max-width: 450px) {
.redevelopment {
  padding: 1px 1px 1px 13%;
}

.redevelopment > div {
  margin: 10px ;
  text-align: center;
  font-size: 17px;
  }
  
  .img_box {
    width: 220px;
    height: 270px;

}
   }