github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/website/components/learn-nomad/style.css (about)

     1  .g-learn-nomad {
     2    padding-top: 88px;
     3    padding-bottom: 88px;
     4    background-image: url(/img/nomad-panel-learn.svg);
     5    background-size: contain;
     6    background-position: bottom right;
     7    background-repeat: no-repeat;
     8  
     9    @media (max-width: 768px) {
    10      padding-top: 64px;
    11      padding-bottom: 64px;
    12    }
    13  
    14    & .learn-container {
    15      @media (max-width: 1200px) {
    16        display: flex;
    17        flex-wrap: wrap;
    18        justify-content: center;
    19      }
    20      & .mobile-button {
    21        @media (min-width: 1201px) {
    22          display: none;
    23        }
    24      }
    25    }
    26  
    27    & .column-container {
    28      display: flex;
    29      justify-content: space-between;
    30      margin: 0 36px;
    31  
    32      @media (max-width: 1200px) {
    33        margin: 0 -16px;
    34        flex-wrap: wrap;
    35      }
    36  
    37      & .column-content {
    38        & h2 {
    39          @media (max-width: 1200px) {
    40            margin: 0;
    41          }
    42        }
    43      }
    44  
    45      & .desktop-button {
    46        @media (max-width: 1200px) {
    47          display: none;
    48        }
    49      }
    50  
    51      & > div {
    52        display: flex;
    53        flex-wrap: wrap;
    54        align-items: center;
    55        margin: 0 16px;
    56        width: 33.333%;
    57        overflow: auto;
    58  
    59        @media (max-width: 1200px) {
    60          text-align: center;
    61          display: block;
    62          width: 100%;
    63          margin: 0;
    64          margin-bottom: 48px;
    65        }
    66      }
    67  
    68      & > a {
    69        display: flex;
    70        cursor: pointer;
    71        margin: 0 16px;
    72        width: 33.333%;
    73        transition: box-shadow 0.25s, transform 0.25s, -webkit-transform 0.25s;
    74  
    75        &:hover {
    76          box-shadow: 0 16px 28px rgba(37, 38, 45, 0.12);
    77          transform: translateY(-4px);
    78        }
    79  
    80        @media (max-width: 1200px) {
    81          width: calc(50% - 32px);
    82          margin-bottom: 48px;
    83        }
    84  
    85        @media (max-width: 768px) {
    86          width: 100%;
    87  
    88          &:last-child {
    89            margin-bottom: 48px;
    90          }
    91        }
    92  
    93        & .course {
    94          border: 1px solid var(--gray-6);
    95          display: flex;
    96          flex-direction: column;
    97          width: 100%;
    98  
    99          & > div {
   100            min-height: 200px;
   101            padding: 25px;
   102          }
   103  
   104          & .image {
   105            background: var(--gray-7);
   106            position: relative;
   107            display: flex;
   108            justify-content: center;
   109            align-items: center;
   110  
   111            & img {
   112              max-width: 80px;
   113              max-height: 80px;
   114            }
   115          }
   116  
   117          & h4 {
   118            color: var(--gray-2);
   119          }
   120  
   121          & .time {
   122            color: var(--gray-4);
   123            position: absolute;
   124            top: 10px;
   125            right: 10px;
   126          }
   127  
   128          & .content {
   129            text-align: center;
   130            background: #fff;
   131            @media (max-width: 768px) {
   132              display: flex;
   133              justify-content: center;
   134              align-items: center;
   135            }
   136  
   137            & h4 {
   138              margin: 24px 0;
   139            }
   140  
   141            & label {
   142              color: var(--nomad);
   143            }
   144          }
   145        }
   146      }
   147    }
   148  }