@keyframes append {
  from {
    opacity: 0;
  }
}
article.article {
  --image-height: 300px;
  display: grid;
  grid-gap: var(--gutter0);
  align-content: start;
}
article.article .image-container {
  position: relative;
  width: 100%;
  grid-row: 1;
}
article.article .image-container .image {
  height: var(--image-height);
  border-top-right-radius: var(--border-radius);
  border-top-left-radius: var(--border-radius);
}
article.article .image-container .image.placeholder {
  background-color: #dddddd;
  display: flex;
  justify-content: center;
  align-items: center;
}
article.article .image-container .image.placeholder > img {
  width: 50%;
}
@media (hover: hover) {
  article.article .image-container:hover ~ .heading a {
    color: #ff2871;
  }
}
article.article .heading {
  font-size: 1.5625em;
  line-height: 1.4;
}
article.article .heading a {
  color: #333333;
}
@media (hover: hover) {
  article.article .heading a:hover {
    color: #ff2871;
  }
}
article.article time {
  grid-row: 2;
  font-weight: 600;
  font-size: 0.8em;
  margin-top: var(--gutter0);
}
article.article .summary {
  display: -webkit-box;
  overflow: hidden;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  align-self: start;
}
article.article .categories {
  --offset: 2rem;
  --padding-x: 1rem;
  --padding-y: calc(var(--padding-x) / 2);
  position: absolute;
  bottom: var(--offset);
  left: var(--offset);
  display: flex;
  gap: var(--gutter0);
  flex-wrap: wrap;
  list-style-type: none;
  width: calc(100% - var(--offset) * 2);
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 0.8em;
}
article.article .categories a {
  display: block;
  padding: var(--padding-y) var(--padding-x);
  border-radius: 5px;
}
article.article .categories a.specialism {
  background-color: rgba(255, 40, 113, 0.85);
}
article.article .categories a.care-homes {
  background-color: rgba(23, 109, 125, 0.85);
}
article.article .categories a.care-at-home {
  background-color: rgba(15, 114, 192, 0.85);
}
@media (hover: hover) {
  article.article .categories a:hover {
    background-color: #FFFFFF;
  }
}
article.article .meta {
  border-top: 1px solid #dddddd;
  padding-top: var(--gutter0);
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-height: calc(3em + var(--gutter0));
}
article.article .meta img {
  background-color: #F7F7F7;
  border-radius: 50%;
  width: 3em;
  height: 3em;
}
article.article .meta .names {
  font-weight: 600;
  grid-column: 2;
  grid-row: 1;
  font-style: normal;
}
article.article .meta .post-date {
  grid-column: 2;
  grid-row: 2;
}
@media (hover: hover) {
  article.article > a:hover .heading {
    color: var(--theme);
    transition: var(--transition);
  }
}
article.article.loaded {
  opacity: 1;
  animation: append 0.4s ease-out;
}
article.article.featured {
  --image-height: min(300px, 30vh);
  grid-template-rows: auto;
  grid-column-gap: var(--gutter1);
}
article.article.featured .image-container .image > img {
  border-radius: calc(var(--border-radius) * 2);
}
article.article.featured .image-container .categories {
  --offset: 3rem ;
}
article.article.featured .heading {
  --link-colour: var(--heading-colour);
  font-size: 3.125em;
  line-height: 1.2;
}
@media (max-width: 480px) {
  article.article.featured .heading {
    font-size: 2em;
    line-height: 1.3;
  }
}
article.article.featured .summary {
  line-clamp: 3;
  -webkit-line-clamp: 3;
}
article.article.featured .call-to-actions {
  display: flex;
  gap: var(--gutter0);
}
article.article.featured .meta {
  border-top: none;
}
@media (min-width: 961px) {
  article.article.featured {
    --image-height: 100%;
    grid-template-columns: 1fr 1fr;
  }
  article.article.featured .image-container {
    grid-row: 1/span 5;
    grid-column: 1;
  }
  article.article.featured .heading, article.article.featured .summary, article.article.featured .meta {
    grid-column: 2;
  }
}
/*# sourceMappingURL=../sourcemaps/components/article.css.map */