eslint/docs/src/assets/scss/components/hero.scss

   1 .hero .grid {
   2     @media all and (min-width: 800px) {
   3         display: grid;
   4         grid-template-columns: 2fr 1fr;
   5         grid-gap: 2rem;
   6         align-items: center;
   7     }
   8
   9     .span-1-7 {
  10         grid-column: 1 / 2;
  11     }
  12
  13     .span-10-12 {
  14         grid-column: 2 / 3;
  15         justify-self: end;
  16     }
  17 }
  18
  19 .hero {
  20     border-bottom: 1px solid var(--divider-color);
  21     border-block-end: 1px solid var(--divider-color);
  22     background-color: var(--hero-background-color);
  23
  24     @media all and (min-width: 800px) {
  25         // when the ad is displayed
  26         min-height: calc(285px + var(--space-xl-4xl));
  27     }
  28
  29     .content-container {
  30         padding: var(--space-xl-4xl) 0;
  31         margin: 0;
  32     }
  33
  34     >.content-container {
  35         margin: 0 auto;
  36         padding: 0 calc(1rem + 1vw);
  37         padding-bottom: 0;
  38         align-items: center;
  39     }
  40 }
  41
  42 .hero--homepage {
  43
  44     .section-title {
  45         margin-bottom: 1.5rem;
  46         margin-block-end: 1.5rem;
  47     }
  48
  49     .section-supporting-text {
  50         margin: 0;
  51         font-size: var(--step-1);
  52         text-align: left;
  53     }
  54
  55     .eslint-actions {
  56         font-size: var(--step-1);
  57         margin-top: 3rem;
  58         margin-block-start: 3rem;
  59     }
  60 }