.dashboard-banner-container { position: relative; background-color: $white; box-shadow: 0 5px 40px -5px rgba($black, 0.25); &:before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 68px; background-color: $white; box-shadow: 0 0 40px -5px rgba($black, 0.25); } &:after { content: ""; display: block; position: absolute; top: 3rem; right: 0; bottom: 0; left: 70%; background-color: $primary; box-shadow: 0 0 40px -5px rgba($black, 0.25); @media (max-width: 992px) { top: 2rem; left: 80%; } } } .dashboard-banner { position: relative; display: grid; grid-template-rows: 3rem 2fr 1fr; grid-template-columns: 1fr 4fr; grid-template-areas: "chart ." "chart stats" "legend stats"; margin-top: -1rem; margin-bottom: 3rem; z-index: 10; @media (max-width: 992px) { grid-template-rows: 2rem auto; grid-template-columns: auto; } } .dashboard-banner-chart { grid-area: chart; // 15px padding matches the Bootstarp conatiner padding. padding: 1rem 1rem 1rem 0; } .dashboard-banner-chart-legend { grid-area: legend; display: flex; // 15px padding matches the Bootstarp conatiner padding. padding: 1rem 1rem; &-item { padding-left: 0.5rem; flex-grow: 1; &:first-of-type { border-left: 4px solid $secondary; } &:last-of-type { border-left: 4px solid $primary; } } &-label { display: block; color: $text-muted; } &-value { display: block; } } .dashboard-banner-network-stats { grid-area: stats; display: flex; align-items: center; justify-content: space-around; // 15px padding matches the Bootstarp conatiner padding. padding-right: 15px; background-color: $primary; box-shadow: -15px 0 40px -5px rgba($black, 0.15); @media (max-width: 992px) { flex-direction: column; align-items: flex-start; padding: 0.5rem 2rem; } &-item { padding-left: 1rem; color: $white; border-left: 4px solid rgba($white, 0.6); } &-label { display: block; white-space: nowrap; } &-value { display: block; font-size: 1.5rem; font-weight: 200; @media (max-width: 992px) { font-size: 1.25rem; } } }