.home-banner { position: relative; background: linear-gradient($hino-red, $hino-red-darker); border-radius: 0 0 $spacer * 2 $spacer * 2; padding: $spacer * 2; padding-top: $spacer; .home-banner-header { .logo-heart { height: $spacer * 2.5; width: auto; } .link-help { .bx { line-height: $spacer * 2.5; font-size: 1.5rem; } } } .home-banner-body { position: relative; .home-banner-body-image { max-height: 40vh; max-width: 100%; } .home-banner-body-greet { position: absolute; top: 0; left: 0; z-index: 1; max-width: 50%; @include media-breakpoint-up(md) { h5 { font-size: 1.5rem; } h2 { font-size: 2.5rem; } } } } } .my-activity__container { .ic-my-activity { width: $spacer * 2.5; } @include media-breakpoint-down(md) { border-radius: $spacer; } @include media-breakpoint-up(lg) { border-top-left-radius: $spacer; border-bottom-left-radius: $spacer; flex-grow: 1; } } .my-activity__day { @include media-breakpoint-down(md) { border-bottom-left-radius: $spacer; border-bottom-right-radius: $spacer; } @include media-breakpoint-up(lg) { border-top-right-radius: $spacer; border-bottom-right-radius: $spacer; height: 100%; } } .latest-news__image { width: 75px; height: 75px; background: $gray-200 no-repeat center; background-size: cover; @include media-breakpoint-up(sm) { width: 150px; height: 150px; } } @media (max-width: 576px) { .tryPopup { position: absolute; bottom: 0; width: 100%; margin: auto; top: 10vh; .modal-content { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; height: 90vh;; .modal-header { .tutup { margin: auto; background-color: #444444; border-radius: 2px; opacity: 0.6; width: 48px; height: 4px; } } .modal-body { overflow-y: auto; } } } }