.moreoninvest { // $moreon_orange: #ff8400; $moreon_blue: #6ca5d4; $moreon_red: #d04317; // $block_size: 6rem; $block_space: 1rem; // @mixin mobile { @media screen and (max-width: 700px) { @content; } } // background-color: #fefefe; position: relative; flex: none; display: flex; align-items: center; padding: 3rem 5rem; overflow: hidden; @include mobile { padding: 3rem 2rem; } &_logo { height: $block_size; z-index: 10; flex: none; @include mobile { height: $block_size / 1.5; } } &_text { flex: none; color: #fff; font-weight: bold; position: relative; display: flex; align-items: center; z-index: 10; padding-right: $block_size * 2; span { display: block; padding: $block_space #{$block_space * 2}; background: $moreon_orange; border-radius: 0.625rem; width: calc(#{$block_size * 3} + 2vw); height: $block_size; text-transform: capitalize; @include mobile { padding: $block_space; } } &::after, &::before { display: block; content: ''; width: $block_size; height: $block_size; border-radius: 0.625rem; position: absolute; } &::before { background: $moreon_blue; right: calc(#{$block_space} + #{$block_size} + 1vw); top: $block_space * 2; } &::after { background: $moreon_red; right: calc(#{$block_space * 3} + 1vw); top: -$block_space * 2; } } &_colorblocks { $block_size: $block_size / 1.5; z-index: 5; position: relative; flex: none; align-self: stretch; &::after, &::before { display: block; content: ''; width: $block_size; height: $block_size; border-radius: 0.625rem; position: absolute; opacity: 0.5; } &--left { width: 35%; @include mobile { width: 15%; } &::before { background: $moreon_red; left: calc(35% + #{$block_space * 2}); top: calc(50% + #{$block_space / 2}); } &::after { background: $moreon_orange; left: calc(65% - #{$block_space * 2}); bottom: calc(50% + #{$block_space / 2}); } } &--right { width: 15%; &::before { background: $moreon_blue; right: calc(52% + #{$block_space / 2}); bottom: calc(50% - #{$block_space / 2}); } &::after { background: $moreon_orange; left: calc(52% + #{$block_space / 2}); top: calc(50% - #{$block_space / 2}); } } } }