|
|
@ -9,36 +9,40 @@ |
|
|
* |
|
|
* |
|
|
*/ |
|
|
*/ |
|
|
|
|
|
|
|
|
.clients { |
|
|
.template { |
|
|
background-color: red; |
|
|
padding: 1rem; |
|
|
//color: white; |
|
|
|
|
|
|
|
|
|
|
|
&__sub_level { |
|
|
// EXAMPLE OF BREAKPOINTS |
|
|
// EXAMPLE OF BREAKPOINTS |
|
|
|
|
|
|
|
|
|
|
|
@media (min-width: 600px) { |
|
|
@media (min-width: 600px) { |
|
|
// Tablet |
|
|
// Tablet |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@media (min-width: 980px) { |
|
|
@media (min-width: 980px) { |
|
|
// Large Tablet |
|
|
// Large Tablet |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@media (min-width: 1024px) { |
|
|
@media (min-width: 1024px) { |
|
|
// Laptop & Tablet |
|
|
// Laptop & Tablet |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@media (min-width: 1336px) { |
|
|
@media (min-width: 1336px) { |
|
|
// Laptop |
|
|
// Laptop |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@media (min-width: 1680px) { |
|
|
@media (min-width: 1680px) { |
|
|
// Desktop |
|
|
// Desktop |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
&__header { |
|
|
|
|
|
border-bottom: 2px solid red; |
|
|
|
|
|
|
|
|
|
|
|
&-heading { |
|
|
|
|
|
// Heading |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
&__sub_level_two { |
|
|
&__content { |
|
|
// |
|
|
// Content |
|
|
} |
|
|
} |
|
|
} |
|
|
} |