:root {
  --font-desktop: 1rem;
  --font-tablet: 0.95rem;
  --font-mobile: 0.85rem;
}

.channel-card-item {
  }

@media (max-width: 1024px) {
  .channel-card-item {
    font-size: var(--font-tablet);
  }
}

@media (max-width: 768px) {
  .channel-card-item {
    font-size: var(--font-mobile);
  }
}

.channel-card-controls {
  margin-bottom: 1em;
}

.channel-card-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em 1em;
  margin-bottom: 0.5em;
}

.channel-card-toolbar select {
  padding: 0.25em;
  font-size: 0.9em;
  width: 20%;
}

.channel-card-toolbar-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em 1em;
}

.channel-card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

.channel-card-item {
  display: flex;
  flex: 0 1 calc(50% - 1em);
  border: 1px solid #ccc;
  padding: 0.5em;
  box-sizing: border-box;
  background: #fdfdfd;
}

.channel-col {
  padding: 0 0.5em;
  font-size: inherit;
}

.channel-num {
  flex-basis: 15%;
  text-align: left;
  font-size: inherit;
}

.channel-name {
  flex-basis: 75%;
  text-align: left;
  font-size: inherit;
}

.channel-pkg {
  flex-basis: 10%;
  text-align: center;
  font-size: inherit;
}