Advertisement
Guest User

Untitled

a guest
Mar 9th, 2018
78
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. .t-main__use {
  2.   padding-top: rem(115px);
  3.   padding-bottom: rem(115px);
  4. }
  5.  
  6. .t-use__article {
  7.   display: flex;
  8.   justify-content: space-between;
  9.  
  10.   .t-use__text {
  11.     width: calc(100% - #{rem(480px)});
  12.  
  13.     span {
  14.       margin-bottom: rem(59px);
  15.       color: #105493;
  16.       font-family: 'Proxima';
  17.       font-size: rem(42px);
  18.       font-weight: 900;
  19.     }
  20.  
  21.     SMALL {
  22.       display: block;
  23.       margin-top: rem(59px);
  24.       margin-bottom: rem(52px);
  25.       color: #979797;
  26.       font-family: 'Proxima';
  27.       font-size: rem(12px);
  28.       font-weight: 400;
  29.       text-transform: uppercase;
  30.       letter-spacing: rem(1.8px);
  31.       line-height: 0;
  32.     }
  33.  
  34.     div {
  35.       margin-top: rem(52px);
  36.       color: #333;
  37.       font-size: rem(16px);
  38.       font-weight: 400;
  39.       line-height: rem(22px);
  40.     }
  41.   }
  42.  
  43.   .t-use__illustration {
  44.     width: rem(386px);
  45.     height: rem(526px);
  46.     background-color: #eaf2f8;
  47.     background-image: url(../images/t-use__photo--first.jpg);
  48.     background-size: contain;
  49.     background-repeat: no-repeat;
  50.   }
  51.  
  52.   // .t-use__article--paired
  53.  
  54.   &--paired {
  55.  
  56.     .t-use__text {
  57.       width: calc(100% - #{rem(606px)});
  58.  
  59.       div {
  60.         margin-top: rem(100px);
  61.       }
  62.  
  63.       a {
  64.         color: #00a8b2;
  65.         font-family: 'Proxima';
  66.         font-size: rem(12px);
  67.         font-weight: 400;
  68.         text-transform: uppercase;
  69.         letter-spacing: rem(1.8px);
  70.         text-decoration: none;
  71.  
  72.         span {
  73.           margin-bottom: 0;
  74.           color: inherit;
  75.           font-family: inherit;
  76.           font-size: inherit;
  77.         }
  78.  
  79.         i {
  80.           display: inline-block;
  81.           width: rem(11px);
  82.           height: rem(11px);
  83.           background-image: url(../images/t-arrow-right.svg);
  84.           background-size: contain;
  85.           background-repeat: no-repeat;
  86.         }
  87.  
  88.         &:hover {
  89.          
  90.           a {
  91.             // TBD // WIP  
  92.           }
  93.  
  94.           i {
  95.             // TBD // WIP
  96.           }
  97.         }
  98.       }
  99.     }
  100.  
  101.     .t-use__illustration {
  102.       order: -1;
  103.       width: rem(491px);
  104.       height: rem(463px);
  105.       background-image: url(../images/t-use__photo--second.jpg);
  106.     }
  107.   }
  108.   // .t-use__article--paired end
  109. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement