2 /// Phantom by HTML5 UP
\r
3 /// html5up.net | @ajlkn
\r
4 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
\r
10 $gutter: _size(gutter);
\r
12 @include padding(5em, 0, (0, 0, 3em, 0));
\r
13 background-color: _palette(bg-alt);
\r
16 @include vendor('display', 'flex');
\r
17 @include vendor('flex-wrap', 'wrap');
\r
18 @include vendor('flex-direction', 'row');
\r
24 section:nth-child(1) {
\r
25 width: calc(66% - #{$gutter});
\r
26 margin-right: $gutter;
\r
29 section:nth-child(2) {
\r
30 width: calc(33% - #{$gutter});
\r
31 margin-left: $gutter;
\r
40 color: transparentize(_palette(fg), 0.5);
\r
47 display: inline-block;
\r
48 border-left: solid 1px transparentize(_palette(fg), 0.85);
\r
62 @include breakpoint(large) {
\r
63 $gutter: _size(gutter) * 0.5;
\r
65 @include padding(5em, 0);
\r
68 section:nth-child(1) {
\r
69 width: calc(66% - #{$gutter});
\r
70 margin-right: $gutter;
\r
73 section:nth-child(2) {
\r
74 width: calc(33% - #{$gutter});
\r
75 margin-left: $gutter;
\r
80 @include breakpoint(medium) {
\r
81 $gutter: _size(gutter);
\r
84 section:nth-child(1) {
\r
89 section:nth-child(2) {
\r
90 width: calc(33% - #{$gutter});
\r
91 margin-left: $gutter;
\r
96 @include breakpoint(small) {
\r
97 @include padding(3em, 0);
\r
100 @include vendor('flex-direction', 'column');
\r
102 section:nth-child(1) {
\r
108 section:nth-child(2) {
\r
109 @include vendor('order', '-1');
\r
120 @include breakpoint(xsmall) {
\r
128 margin: 0.75em 0 0 0;
\r
130 line-height: inherit;
\r