@roadtrip/css/styles/components/_content-card.css

CSS framework for Roadtrip Design System

/*
 * ContentCard
 *
 */

.content-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 0 1rem;
  cursor: pointer;
  user-select: none;
  background: var(--road-surface);
  border: 1px solid var(--road-outline-weak);
  border-radius: var(--road-spacing-02);
}

.content-card-description {
  padding: var(--road-spacing-03) var(--road-spacing-05) var(--road-spacing-05);
}

.content-card-description-title {
  padding: var(--road-spacing-03) 0;
  margin: 0;
  font-size: var(--road-font-size-16);
  font-weight: 700;
  color: var(--road-on-surface);
}

.content-card-description-text {
  padding-bottom: var(--road-spacing-03);
  margin: 0;
  font-size: var(--road-font-size-16);
}

.content-card-description-buttons {
  display: flex;
  flex-direction: column;
}


@media (min-width: 768px) {

  .content-card {
    /* padding: var(--road-spacing-06); */
  }

  .content-card-description-buttons{
    flex-direction: row;
  }

  .content-card-description-buttons .btn{
    margin-right: var(--road-spacing-04);
  }

  .content-card-description-buttons .btn:last-child{
    margin-right: 0;
  }
}