$ButterYellow: #FEDC00; @import "~bootstrap/scss/functions"; @import "~bootstrap/scss/variables"; @import "~bootstrap/scss/mixins"; $custom-colors: ( "ButterYellow": $ButterYellow ); $theme-colors: map-merge($theme-colors, $custom-colors); @import '~bootstrap/scss/bootstrap.scss'; @import '~bootstrap-icons/font/bootstrap-icons'; @font-face { font-family: 'HangeulNuriB'; src: url("../fonts/HangeulNuriB.ttf") format('truetype') } @font-face { font-family: 'HangeulNuriR'; src: url("../fonts/HangeulNuriR.ttf") format('truetype') } * { font-family: "HangeulNuriB" } .carousel-inner .carousel-item.active, .carousel-inner .carousel-item-next, .carousel-inner .carousel-item-prev { display: flex; justify-content: center; } @media (max-width: 767px) { .carousel-inner .carousel-item > div { display: none; } .carousel-inner .carousel-item > div:first-child { display: block; } } /* medium and up screens */ @media (min-width: 768px) { .carousel-inner .carousel-item-end.active, .carousel-inner .carousel-item-next { transform: translateX(25%); } .carousel-inner .carousel-item-start.active, .carousel-inner .carousel-item-prev { transform: translateX(-25%); } } .carousel-inner .carousel-item-end, .carousel-inner .carousel-item-start { transform: translateX(0); }