.blog-grid { display: flex; align-items: top; justify-content: space-around; gap: 60px; flex-wrap: wrap; margin: 60px 0;  }
.blog-grid .grid-item { width: 100%; max-width: 325px; }
.blog-grid .grid-item a { text-decoration: none; }
.blog-grid .grid-item a:hover { text-decoration: underline; }
.blog-grid .grid-item a img { width: 100%; display: block;   }
.blog-grid .grid-item .caption { background-color: #034f62; color: #ffffff; padding: 8px 10px; }


.quote { border-bottom: 1px solid #4c6676; border-top: 1px solid #4c6676; color: #718f9a; font-size: 20px; font-weight: 900; line-height: 30px; margin: 50px 0; padding: 40px 0; position: relative; text-align: center; }

@media only screen and (min-width: 768px) {
  .quote { font-size: 24px; }
}

.quote .content { margin: 0 auto; width: 80%; }

@media only screen and (min-width: 576px) {
  .quote .content { min-height: 200px; }
}

@media only screen and (min-width: 768px) {
  .quote .content { width: 55%; }
}

.quote .name { font-size: 18px; font-style: italic; font-weight: 200; margin-top: 30px; text-transform: uppercase; }

.quote .quote-66 { left: 20px; position: absolute; top: 20px; width: 60px; }

@media only screen and (min-width: 576px) {
  .quote .quote-66 { width: 100px;  }
}

@media only screen and (min-width: 768px) {
  .quote .quote-66 { width: 120px; } 
}

.quote .quote-99 { bottom: 20px; position: absolute; right: 20px; width: 60px; }

@media only screen and (min-width: 576px) {
  .quote .quote-99 { width: 100px; }
}

@media only screen and (min-width: 768px) {
	.quote .quote-99 { width: 120px; }
}

@media only screen and (min-width: 992px) {
  .quote-rs { margin-top: 0; }
  .quote-rs .quote-66,
  .quote-rs .quote-99 { width: 40px; height: 40px; }
  .quote-rs .content { min-height: auto; }
}