.home-header { position: relative; width: 100%; margin: 0px auto; margin-top: 30px; span { height: 80%; width: 8px; background-color: white; border-radius: 10px; } .item { height: 460px; background-size: 100% 100% !important; background-repeat: no-repeat !important; background-position: 0px 0px !important; font-family: numeralLight; color: white; padding-right: 70%; padding-top: 120px; border-radius: 10px; margin: 0px 10px; h1 { font-family: numeralBold; } } strong { font-weight: 300; } &__cover { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: linear-gradient( 0deg, hsla(0, 0%, 0%, 1) 0%, hsla(250, 14%, 61%, 0) 44% ); border-radius: 10px; } } @media screen and (min-width: 1441px) { .home-header { max-width: 1350px; font-family: numeralLight; &__info{ &--author{ position: absolute; left: 30px; bottom: 150px; h3{ margin-right: 5px; font-size: 15px; } i{ margin-right: 5px; font-size: 15px; } } } .item { h1 { font-family: numeralMedium; font-size: 24px; } h2{ font-size: 17px; font-family: numeralMedium; } } .carousel-indicators li { margin-left: 20px !important; max-width: 150px !important; div { margin-right: 10px; } strong { font-size: 12px; } b { font-size: 16px; } } } } @media screen and (min-width: 1008px) and (max-width: 1440px) { .home-header { max-width: 1250px; .item { padding-top: 130px; h1 { font-size: calc(100vw / 65); } h2 { font-size: calc(100vw / 80); } } &__info{ &--author{ position: absolute; left: 30px; bottom: 150px; h3{ margin-right: 5px; font-size: calc(100vw / 100); } i{ margin-right: 5px; font-size: calc(100vw / 100); } } } .carousel-indicators li { margin-left: 10px !important; max-width: 200px !important; div { margin-right: 10px; } strong { font-size: calc(100vw / 100); } b { font-size: calc(100vw / 90); } } } } .carousel-indicators { position: absolute !important; left: 0px !important; right: auto !important; bottom: 40px !important; z-index: auto !important; display: auto !important; justify-content: auto !important; padding: auto !important; margin: 0px !important; list-style: auto !important; color: white; width: 30% !important; justify-content: flex-start !important; span.active { height: 80% !important; width: 8px !important; background-color: yellow !important; } } .active span { background-color: yellow !important; height: 80% !important; width: 8px !important; } .carousel-indicators li { display: auto !important; width: auto !important; height: auto !important; margin: 0px !important; text-indent: 0px !important; cursor: pointer !important; background-color: inherit !important; border: 0px !important; border-radius: 0px !important; text-align: right !important; justify-content: flex-start !important; font-family: numeralLight !important; span { height: 80%; width: 8px; background-color: white; border-radius: 10px; } }