.tile-section {
  display:        flex;
  flex-direction: column;
  max-width:      1000px;
  padding-bottom: 20rem;
}

.tile-container {
  max-width:        1000px;
  background-color: #F5F5F5;
  display:          flex;
  flex-direction:   row;
  justify-content:  space-between;
  flex-wrap:        wrap;
  border-radius:    13px;
  position:         relative;
  margin:           1rem 2rem;
}

.tile-short {
  flex-direction: column;
  width:          250px;
  height:         750px;
  margin:         2rem auto;
  position:       relative;
}
  
.tile-short, .tile-long {
  border-radius:    15px;
  background-color: white;
  margin:           1rem auto;
  width:            250px;            
}

.tile-long p, li {
  font-family: "Roboto";
  font-size:   1rem;
  line-height: 1.3rem;
}
  
.picbox img {
  border-top-left-radius:    13px;
  border-top-right-radius:   13px;
  height:                    250px;
  width:                     250px;
}
  
.tile-textbox h1 {
  font-size:     1rem;
  font-weight:   bold;
  margin-bottom: 1.2rem;
  padding: 0;
}
  
.tile-textbox p {
  font-size:     .8rem;
  margin-bottom: .6rem;
}
  
.tile-textbox {
  padding:     .8rem .8rem 3.2rem .8rem;
  font-family: "Roboto", sans-serif;
  text-align:  left;
}
  
.tile-long {
  padding: 1rem;
}
  
.details-button {
  text-decoration:  none;
  color:            white;
  background-color: #A72A32;
  padding:          .5rem .8rem;
  border-radius:    6px;
  border:           1px solid #A72A32;
  position:         absolute;
  right:            1rem;
  bottom:           1rem;
  font-family:      "Roboto";
  font-style:       normal;
  font-weight:      700;
}
  
.tile-top {
  display:            flex;
  flex-direction:     column;
  min-width:          none;
  background-color: white;
  max-width:          250px;
  border-radius:      13px;
  margin-bottom:      2rem;
}

.tile-top .tile-textbox {
  padding: 2rem;
}

.tile-top p {
  font-size: 1.1rem;
  line-height: 1.6rem;
}

.tile-top .picbox img {
  border-radius: 13px;
}

.tile-section .text-box h1 {
  text-align: center;
  font-weight: bold;
  font-size: 1.6rem;
  line-height: 2rem;
}
  
@media (max-width: 800px) {
  .tile-short, .tile-top {
    flex-direction: column;
    width:          250px;
    height:         auto;
    margin:         2rem auto;
  }
    
  .picbox img {
    border-top-right-radius:   13px;
    border-bottom-left-radius: 0px;
  }
    
  .details-button {
    display:  inline-block;
    margin:   1rem 0 .5rem;
  }
  
  .tile-long, .tile-short .tile-top {
    width: 250px;
  }
}

@media (max-width: 450px) {
  .tile-long, .tile-short, .tile-top {
    width: 250px;
  }
}

@media (max-width: 564px) {
  .tile-thesis {
    margin: 0 auto;
  }
}

@media (max-width: 314px) {
  .tile-short, .tile-long, .tile-top {
    width: 216px;
  }

  .picbox img {
    width: 216px;
    height: 216px;
  }
}