.d-card {
  font-family: var(--d-font-stacks);
  background-color: var(--d-color-neutral-00);
  border-radius: 8px;
  border: 1px solid var(--d-color-neutral-10);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.d-card-header {
  @extend .d-text-body-l;
  padding: 16px 24px;

  &.with-divider {
    border-bottom: 1px solid var(--d-color-neutral-10);
  }

  &.d-card-header-colored {
    background-color: var(--d-color-neutral-10);
  }

  &.d-card-header-dense {
    padding-bottom: 0;
  }

  ~ .d-card-body {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  ~ .d-card-footer {
    padding-bottom: 16px;
  }
}

.d-card-title {
  font-family: var(--d-font-stacks);
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  color: var(--d-color-neutral-100);
}

.d-card-subtitle {
  @extend .d-text-body-l;
  color: var(--d-color-neutral-60);
}

.d-card-body {
  @extend .d-text-body-l;
  padding: 24px;
  display: flex;
  flex-direction: column;

  .d-card-title:not(:last-child) {
    margin-bottom: 8px;

    + .d-card-subtitle {
      margin-top: -8px;

      &:not(:last-child) {
        margin-bottom: 16px;
      }
    }
  }
}

.d-card-footer {
  padding: 0 24px 24px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}

.d-card-cover {
  display: flex;
  padding-bottom: 65.25%;
  position: relative;

  > * {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  > img {
    object-fit: cover;
  }
}

.d-card-section {
  padding: 16px 24px;

  &:not(:last-child) {
    border-bottom: 1px solid var(--d-color-neutral-10);
  }
}