:host {
  --manifold-product-logo-s: 1.5rem;
  --manifold-product-logo-m: 1.5rem;
  --manifold-product-logo-l: 1.625rem;
  --padding: 0.75rem;

  /* theme vars */
  --card-background: var(--manifold-card-background);
  --card-text-color: var(--manifold-text-color);
  --card-border: var(--manifold-card-border);
  --card-radius: var(--manifold-card-radius);
  --card-shadow: var(--manifold-card-shadow);

  /* card:hover */
  --card-background-hover: var(--manifold-card-background-hover, var(--manifold-grayscale-80i));
  --card-text-color-hover: var(--manifold-card-text-color-hover, var(--card-text-color));
  --card-border-hover: var(--manifold-card-border-hover, var(--manifold-border-hover));
  --card-shadow-hover: var(--manifold-card-shadow-hover, var(--card-shadow));

  /* headings */
  --card-heading-font-family: var(--manifold-font-family-heading);
  --card-heading-font-weight: var(--manifold-font-weight-heading);
  --card-heading-text-color: var(--manifold-text-color-heading);

  color: var(--manifold-text-color);
  font-family: var(--manifold-font-family);
}

.wrapper {
  display: grid;
  grid-column-gap: var(--padding);
  grid-template-areas:
    'name logo'
    'status status';
  grid-template-rows: auto -webkit-min-content;
  grid-template-rows: auto min-content;
  grid-template-columns: auto -webkit-max-content;
  grid-template-columns: auto max-content;
  box-sizing: border-box;
  height: 100%;
  padding: var(--padding);
  color: var(--card-text-color);
  font-family: var(--manifold-font-family);
  text-decoration: none;
  background: var(--card-background);
  border: 1px solid #d3d3d4;
  border: var(--card-border, 1px solid #d3d3d4);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  cursor: pointer;
  -webkit-transition: border-color 150ms linear, box-shadow 150ms linear;
  transition: border-color 150ms linear, box-shadow 150ms linear
}

.wrapper:focus,
  .wrapper:hover {
    background: var(--card-background-hover);
    border: var(--card-border-hover);
    box-shadow: var(--card-shadow-hover);
  }

.logo {
  grid-area: logo
}

.logo img {
    box-sizing: border-box;
    width: var(--manifold-product-logo-s);
    height: var(--manifold-product-logo-s);
    overflow: hidden;
    color: transparent;
    background: white;
    border: 2px solid white;
    border-radius: var(--manifold-radius)
  }

@media (min-width: 450px) {

.logo img {
      width: var(--manifold-product-logo-m);
      height: var(--manifold-product-logo-m)
  }
    }

@media (min-width: 750px) {

.logo img {
      width: var(--manifold-product-logo-l);
      height: var(--manifold-product-logo-l)
  }
    }

.logo-placeholder {
  grid-area: logo;
  color: var(--manifold-color-gray30);
  background-color: var(--manifold-color-gray05);
  border-radius: var(--manifold-radius)
}

.logo-placeholder manifold-icon {
    width: var(--manifold-product-logo-s);
    height: var(--manifold-product-logo-s)
  }

@media (min-width: 450px) {

.logo-placeholder manifold-icon {
      width: var(--manifold-product-logo-m);
      height: var(--manifold-product-logo-m)
  }
    }

@media (min-width: 750px) {

.logo-placeholder manifold-icon {
      width: var(--manifold-product-logo-l);
      height: var(--manifold-product-logo-l)
  }
    }

.name {
  grid-area: name;
  align-self: start;
  margin-top: 0;
  margin-bottom: 0;
  padding-right: 1em;
  color: var(--card-heading-text-color);
  font-weight: var(--card-heading-font-weight);
  font-size: 1em;
  font-family: var(--card-heading-font-family);
  line-height: 1.2
}

@media (min-width: 1080px) {

.name {
    padding-left: 0
}
  }

.status {
  grid-area: status;
  padding-top: 0.25rem;
}