Summary Block Styling

Just for you to examine, here is the code I use for my 7.0 blog summary blocks (should work with 7.1 without any other summary block code of course) The border radius of the summary block item can be adjusted for just about any shape. The read more button has a gradient color which can also be changed easily. Title font and size is also easy to adjust. You can see my summary items here:   

  https://myrandomviews.com/blogsummary

// DB Summary Block Design //

img.summary-thumbnail-image.loaded:hover {
 opacity: 0.5;
 }

.summary-title-link {
    font-family: proxima-nova, serif;
    font-size: 18px;
}
.summary-excerpt p {
  font-size: 14px !important;
}
.sqs-block-summary-v2 .summary-item {
  background-color: #ffffff;
  border-radius: 70px 15px 70px 15px;
  -webkit-box-shadow: 0px 0px 15px rgba(100, 100, 100, 100.1) !important;
  -moz-box-shadow: 0px 0px 15px rgba(100, 100, 100, 100.1) !important;
  box-shadow: 6px 5px 15px rgba(100, 100, 100, 100.1) !important;
}

// DB Summary Content Padding //

.sqs-block-summary-v2 .summary-item .summary-content {
    padding: 20px 40px 20px 40px;
}

// DB Summary Block Button //

.sqs-block-summary-v2 .summary-item-record-type-text .summary-read-more-link {
  display: inline-block;
  margin-top: 10px;
  background: linear-gradient(to right, #F07C63, #E45372);
  color: white;
  border: 0px solid white;
  border-radius: 50px;
  padding: 10px 20px;
 filter: drop-shadow(8px 8px 8px #666666);
}