.channel-card-item {
  display: contents;
}
.channel-card-content {
  background-color: var(--color-surface-default, #FFFFFF);
  border-radius: var(--border-radius-border-radius-xl, 24px);
  padding: var(--space-lg, 24px);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.channel-card-info {
  display: flex;
  align-items: center;
  gap: var(--space-md, 16px);
}
.channel-card-meta {
  display: grid;
}
.program-row {
  display: flex;
  gap: var(--space-md, 16px);
}
.channel-card-meta .heading {
  font-weight: var(--font-weight-font-weight-bold, 700);
  color: var(--color-foreground-default, #010414);
}
.channel-number{
  font-weight: var(--font-weight-font-weight-regular, 400);
  color: var(--color-foreground-strong, #606062);
  line-height: var(--typography-line-height-footnote-lg, 22px);
}
.channel-card-logo {
  padding-right: var(--space-xs, 4px);
}
.channel-card-logo img {
  width: 60px;
  height: 33px;
  object-fit: contain;
}
.channel-card-body {
  white-space: nowrap;
}
.channel-card-body:has(.channel-card-program),
.channel-card-body:has(.channel-card-no-data) {
  border-top: 1px solid var(--color-border-width-border-width-default, #DEDEE0);
  margin-top: 12px;
}
.channel-card-program {
	padding-top: 12px;
} 
.program-time, .program-text {
	color: var(--color-foreground-inactive, #78787A);
	line-height: var(--typography-line-height-caption-lg, 16px);
}
.program-time strong, .program-text strong {
  color: var(--color-foreground-default, #010414);
}
.channel-card-no-data {
	padding-top: 12px;
  color: var(--color-foreground-inactive, #78787A);
  line-height: var(--typography-line-height-caption-lg, 16px);
  font-weight: var(--font-weight-font-weight-regular, 400);
}
@media only screen and (max-width: 960px) {
	.channel-card-content {
  	padding: var( --space-md, 16px);
	}
  .channel-card-content:not(:has(.channel-card-program)):not(:has(.channel-card-no-data)) {
    text-align: center;
  }
  .channel-card-content:not(:has(.channel-card-program)):not(:has(.channel-card-no-data))
  .channel-card-info {
    flex-direction: column;
    align-items: center;
  }
  .channel-card-content:not(:has(.channel-card-program)):not(:has(.channel-card-no-data))
  .channel-card-logo img {
    width: 48px;      
    height: 27px;
  }
  .channel-card-content:not(:has(.channel-card-program)):not(:has(.channel-card-no-data))
  .channel-card-logo {
    margin-bottom: var(--space-sm, 8px);
  }
}