.card {
  @apply relative bg-white shadow-lg rounded-lg overflow-hidden font-sans border border-grey-light;
  box-sizing: border-box;
  max-width: 500px; 
  width: 100vw;
  display: flex;
  flex-direction: column;
  height: -webkit-fill-available;
  border-bottom: 0;
  border-right: 0;
  border-left: 0;
}

.card--flat-bottom {
  @apply rounded-none rounded-t-lg;
}

.card--center {
  @apply mx-auto;
}

.card--inline-headers .card__header-container {
  @apply flex items-center my-4 justify-between pr-2;
}

.card--inline-headers .card__header {
  @apply inline my-0 pt-0 pl-4;
}

.card--inline-headers .card__subheader {
  @apply inline-flex;
}

.card--inline-headers .card__subheader--sectioned {
  @apply m-0;
}

.card--inline-headers .card__subheader-section {
  @apply px-3;
}

.card__subheader-section-text {
  @apply font-medium text-xs;
  line-height: 20px;
  margin-top: -2px;
}

.card__header {
  @apply text-base text-center font-semibold px-6 pt-4 tracking-wide;
}

.card__header--with-avatar {
  @apply flex items-center mb-3;
}

.card__avatar {
  @apply mr-4;
}

.card__subheader {
  @apply text-sm text-center mt-2 mb-3 text-grey font-medium antialiased mx-6;
}

.card__subheader--sectioned {
  @apply flex justify-center;
}

.card__subheader--simple {
  @apply my-4;
}

.card__subheader-section {
  @apply inline-flex items-center border-r border-grey-light px-2;
  /* TODO: Make custom utility for this */
  border-left: none;
  border-top: none;
  border-bottom: none;
}

.card__subheader-section:last-child {
  border: none;
}

.card__subheader-section-icon {
  margin-right: 5px;
}

.card__subheader-section-icon--link svg {
  @apply text-blue;
}

.card__content-container {
  @apply relative;
  flex: 1;
}

.card__content-container .gallery__container {
  @apply absolute;
}

.card__content-container .gallery__image-load-tracker .gallery__container {
  @apply relative;
}

.card__content {
  @apply relative;

  line-height: 0;
  box-sizing: border-box;

  overflow-y: auto;
  /* When `overflow-y` is set to `auto` we lose the rounded corners. This adds them back. */
  -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
}

.card__content::-webkit-scrollbar {
  width: 0px !important;
  display: none;
  background: transparent !important;
}

.card__content-nodata {
  @apply absolute h-full center-abs w-full;

  /** It is set as 0 in __content **/
  line-height: unset;
}
.card__content-nodata-loading {
}
.card__content-nodata-empty {}

.card__content-cell {
  @apply relative inline-block w-1/3;

  padding-bottom: 1px;
}

.card__content-cell:nth-child(3n + 1) {
  padding-right: 1px;
}

.card__content-cell:nth-child(3n + 3) {
  padding-left: 1px;
}

.card__content-cell-contents-wrapper:before {
  content: "";
  display: block;
  padding-top: 100%;
}

.card__content-cell-contents-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
}

.card__content-cell-contents {
  position: absolute;
  overflow: hidden;

  right: 0;
  bottom: 0;
  top: 0;
  left: 0;

  object-fit: cover;

  width: 100%;
  height: 100%;
}

/* 
 * If the contents are images, we want to give them a background such
 * that they have a placeholder when the image is still being loaded.
 */
img.card__content-cell-contents {
  @apply bg-grey-light;
}

.card__action {
  @apply flex justify-center w-full pin-b absolute mb-4;
}

/**
 * stats
    mb-3
    mt-2
    mx-6
 */