github.com/KyaXTeam/consul@v1.4.5/website/source/assets/stylesheets/consul-connect/components/_hero.scss (about)

     1  .g-hero {
     2    background: url("/assets/images/consul-connect/hero-bg.png") no-repeat top
     3      center;
     4    background-size: cover;
     5    margin-top: -92px;
     6    padding: 126px 40px 56px;
     7    text-align: center;
     8  
     9    @media (min-width: 768px) {
    10      padding: 154px 56px 96px;
    11    }
    12  
    13    @media (min-width: 992px) {
    14      margin-top: -112px;
    15      padding-top: 214px;
    16      padding-bottom: 120px;
    17    }
    18  
    19    h1 {
    20      margin: 0 0 16px;
    21    }
    22  
    23    p {
    24      font-size: 1.8rem;
    25      max-width: 848px;
    26      margin: 0 auto 35px;
    27  
    28      @media (min-width: 768px) {
    29        font-size: 2rem;
    30      }
    31  
    32      @media (min-width: 992px) {
    33        font-size: 2.4rem;
    34      }
    35    }
    36  
    37    span {
    38      border: 1px solid #ca2171;
    39      border-radius: 2px;
    40      display: inline-block;
    41      font-size: 12px;
    42      font-weight: 600;
    43      letter-spacing: 0.5px;
    44      line-height: 20px;
    45      margin-bottom: 24px;
    46      padding: 2px 9px;
    47      text-transform: uppercase;
    48  
    49      @media (min-width: 992px) {
    50        margin-bottom: 16px;
    51      }
    52    }
    53  
    54    & > div {
    55      margin: 0 -30px;
    56  
    57      .g-btn {
    58        min-width: 129px;
    59        margin: 5px;
    60  
    61        @media (min-width: 400px) {
    62          margin: 5px 10px;
    63        }
    64        
    65        @media (max-width: 767px) {
    66          padding: 6px 5px;
    67        }
    68  
    69        @media (min-width: 768px) {
    70          margin: 0 10px;
    71          min-width: 144px;
    72        }
    73      }
    74    }
    75  }