/*
* MEDIA QUERIES
* Breakpoints for responsive sites
*/
/*
* TEXT TRUNCATE
* An easy way to truncate text with an ellipsis. Requires the element to be block or inline-block.
* Usage: @include text-truncate;
* Source: http://web-design-weekly.com/2013/05/12/handy-sass-mixins/
*/
/*
* DON'T BREAK
* Useful mixing so links don't overrun their container
* Usage: @include dontbreak();
* Source: https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
*/
/*
* Skew
* Useful mixing to create skewed edges
* Usage: @include angle-edge(bottomright, 3deg, topleft, 3deg, #fff);
* Source: http://www.hongkiat.com/blog/skewed-edges-css/
*/
/*
* SASS Parent append
* Useful if you want to add an append to the parent without writing it out again
* Usage: @include parent-append(":hover")
* Source: https://codepen.io/imkremen/pen/RMVBvq
*/
/*
* Checked animation
*/
@-webkit-keyframes checked {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes checked {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(45deg);
  }
}
@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
}
/*
* Breakpoint debugging
*/
.latest-articles {
  margin-bottom: 30px;
}
.latest-articles--title {
  border-bottom: 1px solid black;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  position: relative;
  top: 3px;
}
.latest-articles--title h2 {
  color: #373737;
  font-size: 1.875rem;
  color: #2a7e81;
  font-family: "OpenSansBold", sans-serif;
  margin: 0;
  margin-right: 15px;
  margin-bottom: 0px;
}
.latest-articles--title p {
  color: #083145;
  margin: 0 0 20px 0;
  line-height: 1.75rem;
  font-size: 1.25rem;
  margin-bottom: 0px;
}
@media (max-width: 768px) {
  .latest-articles--title {
    margin-top: 3rem;
    align-items: flex-start;
    flex-direction: column;
  }
}
.latest-articles .latest-articles-link {
  height: 100%;
}
.latest-articles .latest-articles-link:hover .read-on-btn {
  color: #62beba;
  border-bottom: 1px solid #62beba;
}
.latest-articles--inner {
  display: grid;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
}
.latest-articles--inner .left .latest-articles--item {
  height: 100%;
}
@media (max-width: 1024px) {
  .latest-articles--inner .left {
    width: 100%;
  }
}
.latest-articles--inner .right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (max-width: 1024px) {
  .latest-articles--inner .right {
    width: 100%;
  }
}
.latest-articles--inner .right .latest-articles--item {
  height: 100%;
}
.latest-articles--inner .right .latest-articles--item h3 {
  font-size: 1rem;
}
.latest-articles--inner .bottom {
  display: grid;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
}
.latest-articles--inner .bottom .latest-articles--item {
  height: 100%;
}
.latest-articles--inner .bottom .latest-articles--item .image-holder {
  aspect-ratio: 1.6;
  overflow: hidden;
}
.latest-articles--inner .bottom .latest-articles--item .image-holder img {
  height: 100%;
}
.latest-articles--inner .bottom .latest-articles--item h3 {
  font-size: 1rem;
}
@media (min-width: 769px) {
  .latest-articles--inner {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .latest-articles--inner .left {
    grid-area: 1/1/2/3;
  }
  .latest-articles--inner .right {
    grid-area: 1/3/2/4;
  }
  .latest-articles--inner .bottom {
    grid-template-columns: 1fr 1fr 1fr;
    grid-area: 2/1/3/4;
  }
}
.latest-articles--item {
  padding: 1rem;
  border: 1px solid #E5E7EB;
  transition: all 0.2s ease-in-out;
}
.latest-articles--item a {
  width: 100%;
}
.latest-articles--item img {
  width: 100%;
}
.latest-articles--item:hover {
  background-color: #F3F4F6;
}
.latest-articles--item .meta {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #9CA3AF;
  margin: 1rem 0;
  font-weight: 600;
}
.latest-articles--item h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: #083145;
}
.latest-articles--item h3 a {
  font-weight: 800;
}
.latest-articles--item p {
  font-size: 1.125rem;
}
.latest-articles--item .read-on-btn {
  display: inline-block;
  color: #205f61;
  border-bottom: 1px solid #205f61;
  text-transform: uppercase;
  font-size: 0.75rem;
  line-height: 1rem;
  text-transform: uppercase;
  font-weight: 800;
  transition: all 0.2s ease-in-out;
  margin-bottom: 0;
}
.latest-articles--item .read-on-btn:hover {
  color: #62beba;
  border-bottom: 1px solid #62beba;
}