:host.column {
  --image-height: 176px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
:host.column:hover img, :host.column:active img, :host.column:focus img {
  transform: scale(1.05);
}
:host.column img {
  display: block;
}
:host.column .contents-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}
:host.column .image-wrapper {
  display: block;
  margin-block-end: var(--space-5);
  height: var(--image-height);
  overflow: hidden;
}
:host.column .image-wrapper img {
  display: block;
  height: var(--image-height);
  object-fit: cover;
  transition: transform 200ms cubic-bezier(0.32, 0.72, 0, 1);
}
:host.column .content {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
}
:host.column .content .meta {
  display: flex;
  overflow: hidden;
  margin-block-end: var(--space-3);
}
:host.column .content .meta .type {
  margin-inline-end: var(--space-4);
}
:host.column .content .title {
  color: #010610;
}
:host.column .content .description {
  color: var(--c-indigo-80);
  margin-block-start: var(--space-2);
}

:host.row {
  --image-height: 100%;
}
:host.row .contents-wrapper {
  display: flex;
}
:host.row .image-wrapper {
  flex-basis: 60%;
  min-height: var(--image-height);
}
:host.row .image-wrapper img {
  height: 100%;
  object-fit: cover;
}
: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 .contents-wrapper {
    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);
  }
}

.description {
  margin-block-end: 0;
}

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