.bf-page {
   --bf-offset: 80px;
   --y: 0px;

   position: relative;
   padding-bottom: var(--bf-offset);
   font-size: 28px;
   line-height: 1.4;

   &::after {
      content: '';
      position: absolute;
      inset: 0;
      background: url(back.png) 50% var(--y) repeat-y;
      pointer-events: none;
      filter: drop-shadow(2px 4px 26px rgba(0, 0, 0, .2));
      z-index: 20;
   }
}

.bf-page img {
   height: auto;
}

.bf-showcase__main {
   position: relative;
}

.bf-showcase__main img {
   display: block;
   height: auto;
   border-radius: 40px;
}

.bf-offset {
   margin-top: calc(var(--bf-offset) * 2);
}

.bf-head.center {
   max-width: 1100px;
   margin: 0 auto var(--bf-offset);
}

.bf-title {
   font-size: 48px;
   line-height: 1.2;
   font-weight: bold;
   margin-bottom: 30px;
}

.bf-title span {
   color: #853CEC;
}

.bf-text {
   line-height: 1.4;
}

.bf-grey {
   color: rgba(0, 0, 0, .5);
}

.bf-tabs-list {
   display: flex;
   justify-content: center;
   margin: 0 auto var(--bf-offset);
   gap: 8px 24px;
}

.bf-tabs-list li {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 12px;
   height: 80px;
   padding: 0 32px;
   cursor: pointer;
   font-size: 30px;
   line-height: 1.2;
   font-weight: bold;
   border-radius: 40px;
   white-space: nowrap;
   background-color: #F7F7F7;
}

.bf-tabs-list li span {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background-color: #fff;
   overflow: hidden;
}

.bf-tabs-list li.active {
   background: linear-gradient(90deg, #9959F4 0%, #59348E 100%);
   color: #fff;
}

.bf-blocks {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   margin-bottom: var(--bf-offset);
}

.bf-blocks__item {
   border-radius: 20px;
   border: 1px solid #DBDBDB;
   padding: 30px;
}

.bf-blocks .N-element {
   height: 100%;
   margin-bottom: 0;
}

.bf-button {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100px;
   max-width: 460px;
   background: linear-gradient(180deg, #9959F4 0%, #59348E 100%);
   color: #FFFFFF;
   text-decoration: none;
   font-size: 28px;
   font-weight: bold;
   border-radius: 20px;
}

.bf-cards {
   justify-content: center;
   gap: 30px 0;
   margin-bottom: var(--bf-offset);
}

.bf-card {
   position: relative;
   border-radius: 20px;
   overflow: hidden;
}

.bf-step {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
}

.bf-step-item {
   height: 100%;
   display: flex;
   flex-direction: column;
}

.bf-step-item__content {
   background-color: #F7F7F7;
   border-radius: 30px;
   flex-grow: 1;
   padding: 0 64px 64px;
   position: relative;
   display: flex;
   align-items: center;
   flex-direction: column;
   text-align: center;
   overflow: hidden;
}

.bf-step-item__shadow {
   width: 200px;
   height: 200px;
   margin: -100px auto 0;
}

.bf-step-item__shadow img {
   filter: blur(20px);
   transform: translateX(-20%);
   opacity: .4;
}

.bf-step-item__title {
   font-size: 28px;
   font-weight: bold;
   margin-bottom: 12px;
}

.bf-step-item__text {
   font-size: 22px;
}

.bf-step-item__image {
   width: 200px;
   height: 200px;
   margin: 0 auto -80px;
   position: relative;
   z-index: 1;
}

.bf-label {
   text-align: center;
   border-radius: 30px;
   background: linear-gradient(90deg, #F15F5D 0%, #EA3E7B 50%, #9935DB 100%);
   padding: 50px;
   color: #fff;
   font-size: 40px;
   font-weight: bold;
}

.gift-slider {
   width: 370px;
   margin: 0 auto;
}

.gift-slider .splide__track {
   overflow: visible;
}

@media (max-width: 1300px) {
   .bf-blocks {
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
   }
}

@media (max-width: 1023px) {

   .bf-label {
      font-size: 24px;
      padding: 30px;
   }

   .bf-blocks {
      grid-template-columns: repeat(2, 1fr);
      gap: 5px;
   }

   .bf-title {
      font-size: 26px;
   }

   .bf-page {
      --bf-offset: 30px;
      font-size: 18px;
   }

   .bf-showcase__main img {
      border-radius: 16px;
   }

   .bf-tabs-list {
      flex-direction: column;
      border-radius: 10px;
   }

   .bf-tabs-list li {
      font-size: 18px;
      height: auto;
      padding: 8px 16px;
      border-radius: 10px;
   }

   .bf-button {
      height: 50px;
      font-size: 18px;
      border-radius: 10px;
   }

   .bf-blocks__item {
      border-radius: 0;
      border: none;
      padding: 0;
   }

   .gift-slider {
      width: auto;
   }

   .bf-step {
      grid-template-columns: 1fr;
   }

   .bf-step-item__content {
      padding-left: 32px;
      padding-right: 32px;
   }
}