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

     1  .g-use-cases {
     2    margin: 48px 0 8px;
     3  
     4    @media (min-width: 768px) {
     5      display: flex;
     6      justify-content: center;
     7      margin: 0 (-$site-gutter-padding);
     8    }
     9  
    10    img {
    11      width: 51%;
    12    }
    13  
    14    h3 {
    15      font-weight: 600;
    16      margin: 40px 0 0;
    17  
    18      span {
    19        display: block;
    20        font-weight: 300;
    21      }
    22    }
    23  
    24    p {
    25      margin-top: 0.5em;
    26  
    27      @media (min-width: 768px) {
    28        margin-top: 1em;
    29      }
    30    }
    31  
    32    & > div {
    33      padding: 0 16px;
    34      position: relative;
    35      text-align: center;
    36  
    37      @media (min-width: 768px) {
    38        padding: 0 $site-gutter-padding;
    39        width: 33.33333%;
    40      }
    41  
    42      @media (min-width: 992px) {
    43        display: flex;
    44        flex-direction: column;
    45        justify-content: space-between;
    46      }
    47  
    48      & + div {
    49        margin-top: 56px;
    50  
    51        @media (min-width: 768px) {
    52          margin-top: 0;
    53        }
    54      }
    55    }
    56  
    57    .g-btn {
    58      @media (min-width: 768px) {
    59        margin-top: 22px;
    60      }
    61    }
    62  }