1  @import './assets/styles/global.scss';
  2  
  3  .wordcloud {
  4    padding: calculateRem(32) 0 calculateRem(40);
  5    outline: none;
  6    background-color: $navy;
  7    display: flex;
  8    flex-direction: column;
  9  
 10    @media (min-width: $smallMobile) {
 11      padding-left: calculateRem(24);
 12    }
 13  
 14    @media (min-width: $tablet) {
 15      padding-top: calculateRem(48);
 16      padding-left: calculateRem(48);
 17    }
 18  
 19    .wordcloud-header {
 20      padding-left: calculateRem(20);
 21  
 22      @media (min-width: $smallMobile) {
 23        padding-left: 0;
 24      }
 25    }
 26  
 27    h3 {
 28      @include hasRedUnderline;
 29      position: relative;
 30      margin: calculateRem(-24) 0 calculateRem(48) calculateRem(48);
 31      color: #fff;
 32      font-family: $secondary-font;
 33      font-size: calculateRem(22);
 34      line-height: 1;
 35      letter-spacing: 2px;
 36      padding-right: calculateRem(24);
 37      transition: font-size 0.2s ease;
 38  
 39      @media (min-width: $tablet) {
 40        font-size: calculateRem(38);
 41        margin-bottom: calculateRem(60);
 42      }
 43  
 44      &::before {
 45        z-index: 0;
 46        bottom: calculateRem(-8);
 47      }
 48  
 49      br {
 50  
 51        @media (max-width: $toTablet) {
 52          display: none;
 53        }
 54      }
 55    }
 56  
 57    p {
 58      font-family: $secondary-font;
 59      color: $blue-light;
 60      font-size: calculateRem(100);
 61      line-height: 0.8;
 62    }
 63  
 64    .words-wrap {
 65      display: flex;
 66      flex-direction: column;
 67      justify-content: center;
 68      flex-grow: 1;
 69      text-align: center;
 70  
 71      @media (min-width: $smallMobile) {
 72        padding-right: calculateRem(24);
 73      }
 74  
 75      @media (min-width: $tablet) {
 76        padding-right: calculateRem(48);
 77      }
 78  
 79      > div > span {
 80        display: inline-block;
 81        line-height: 1.2;
 82        padding: calculateRem(4) calculateRem(12);
 83        transform: scale(1);
 84        transition: transform 0.2s ease-in-out;
 85        
 86        &:hover {
 87          transform: scale(1.05);
 88        }
 89  
 90        &.size-1 {
 91          font-size: calculateRem(30);
 92  
 93          > span:hover,
 94          > a:hover {
 95            color: $red;
 96          }
 97        }
 98  
 99        &.size-2 {
100          font-size: calculateRem(25);
101  
102          > span:hover,
103          > a:hover {
104            color: $orange;
105          }
106        }
107  
108        &.size-3 {
109          font-size: calculateRem(20);
110  
111          > span:hover,
112          > a:hover {
113            color: $turquoise;
114          }
115        }
116  
117        &.size-4 {
118          font-size: calculateRem(15);
119  
120          > span:hover,
121          > a:hover {
122            color: #fff;
123          }
124        }
125  
126        > span,
127        > a {
128          color: $text-color;
129          transition: color 0.2s ease;
130  
131          &:hover {
132            color: $red;
133            text-shadow: 0 0 11px #000;
134          }
135        }
136  
137        > a {
138          text-decoration: none;
139  
140          @media (max-width: $toDesktop) {
141            @include hasRedUnderline;
142            position: relative;
143  
144            &::before {
145              background-color: $orange;
146            }
147          }
148  
149          &:hover {
150            text-decoration: underline;
151          }
152        }
153      }
154    }
155  }