:host {
  display: flex;
  flex-direction: column;
  --image-height: 176px;
  height: 100%;
}

:host.row {
  display: flex;
  flex-direction: row;
}
:host.row .image-wrapper {
  flex-basis: 60%;
  height: var(--image-height);
}
:host.row .image-wrapper img {
  height: 100%;
}
:host.row .content {
  flex-basis: 40%;
  margin-inline-start: var(--space-9);
}
:host.row .content .meta {
  margin-block-start: 0;
  margin-block-end: 40px;
}
:host.row .content .description {
  margin-block-start: var(--space-4);
}
@media screen and (max-width: 767px) {
  :host.row {
    flex-direction: column;
  }
  :host.row .content {
    margin-inline-start: 0;
  }
  :host.row .content .meta {
    display: flex;
    margin-block-start: var(--space-5);
    margin-block-end: var(--space-3);
    overflow: hidden;
  }
  :host.row .content .meta .type {
    margin-inline-end: var(--space-4);
  }
}

img {
  display: block;
}

a.image-wrapper {
  height: var(--image-height);
  overflow: hidden;
}
a.image-wrapper:hover img, a.image-wrapper:active img, a.image-wrapper:focus img {
  transform: scale(1.05);
}
a.image-wrapper img {
  height: var(--image-height);
  object-fit: cover;
  transition: transform 200ms cubic-bezier(0.32, 0.72, 0, 1);
}

.content {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
}
.content .meta {
  display: flex;
  margin-block-start: var(--space-5);
  margin-block-end: var(--space-3);
  overflow: hidden;
}
.content .meta .type {
  margin-inline-end: var(--space-4);
}
.content .title {
  color: #010610;
}
.content .description {
  color: var(--c-indigo-80);
  margin-block-start: var(--space-5);
}

.author {
  flex-grow: 1;
  display: flex;
  align-items: flex-end;
}
.author resource-author-item {
  margin-block-start: 46px;
  justify-self: flex-end;
}