.templatePage { position: relative; width: 100%; height: 100%; // display: flex; // flex-direction: column; &__header { position: relative; padding-top: em(60); padding-left: em(30); } &__body { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; margin-top: em(32); } &__footer { position: relative; padding-top: em(80); } &__title { position: relative; padding-bottom: em(20); width: em(500); } &__swiper { position: relative; width: em(500); height: em(500); } &__slide { position: relative; width: em(500); height: em(500); border-radius: em(20); border: 1px solid #4B5283; overflow: hidden; img { height: 100%; object-fit: cover; } } .swiper-container { overflow: visible!important; .swiper-slide { transition: all 0.5s ease-in-out; margin-right: em(30); } .swiper-slide:not(.swiper-slide-active) { filter: grayscale(0.6); opacity: 0.8; } .swiper-slide.swiper-slide-active { filter: grayscale(0); opacity: 1; } } &__pagination { position: relative; display: flex; justify-content: center; align-items: center; padding-top: em(10); .pagination__bullet { position: relative; width: em(10); height: em(10); border-radius: 100%; background-color: #FFFFFF; margin-left: em(5); margin-right: em(5); &.swiper-pagination-bullet-active { background-color: #4B5283; } } } .btn__back { cursor: pointer; position: relative; width: em(233); } .btn__confirm { cursor: pointer; position: relative; width: em(250); margin-left: auto; margin-right: auto; } }