writewithbee

I'm totally stuck on this after going round in circles for a couple of hours trying to get the flex box thing to work. 

I need the 'Read More' links aligned to the bottom of each container so they look consistent across the summary items. 

https://triceratops-tuba-r9bj.squarespace.com/home-1

pw: sunnyside

This is what I am using at the moment after watching some tutorials:

.summary-item {
  border: 0px solid purple;
  display: flex;
  flex-direction: column;
 
}
         

.summary-content {
  border-top: 2px solid darkred;
  padding: 0px 0px 0px 0px;
  display: flex;
  flex-direction: column;
  flex: 1;
}


  .summary-read-more-link {
  font-size:0!important;
    margin-top: auto !important;
    
}

.summary-read-more-link:after {
  font-size:1rem!important;
  border:1px solid darkred;
  content: "Read More →";
  background: #;
  padding: 5px 10px 5px 8px;
}

.summary-read-more-link:hover:after{
  background:darkred !important;    
  color:#fff!important
}

Any help understanding where I am going wrong would be very helpful!