$ds-width: 936px;

.discovery-stream.ds-layout {
  $columns: 12;
  --gridColumnGap: 48px;
  --gridRowGap: 24px;

  grid-template-columns: repeat($columns, 1fr);
  grid-column-gap: var(--gridColumnGap);
  grid-row-gap: var(--gridRowGap);
  margin: 0 auto;

  @while $columns > 0 {
    .ds-column-#{$columns} {
      grid-column-start: auto;
      grid-column-end: span $columns;
    }

    $columns: $columns - 1;
  }

  .ds-column-grid {
    display: grid;
    grid-row-gap: var(--gridRowGap);

    // We want to completely hide components with no content,
    // otherwise, it creates grid-row-gap gaps around nothing.
    > div:empty {
      display: none;
    }
  }
}

.ds-header {
  margin: 8px 0;

  .ds-context {
    font-weight: 400;
  }
}

.ds-header,
.ds-layout .section-title span {
  color: var(--newtab-text-primary-color);
  font-size: $section-title-font-size;
  font-weight: 600;
  line-height: 20px;

  .icon {
    fill: var(--newtab-text-secondary-color);
  }
}

.collapsible-section.ds-layout {
  margin: auto;

  .section-top-bar {
    .learn-more-link a {
      color: var(--newtab-primary-action-background);
      font-weight: 500;

      &:is(:focus, :hover) {
        text-decoration: none;
      }
    }
  }
}