/* =========================================================
   SISTER SLIDER SECTION
========================================================= */

.bf-sister-slider-section{
  width:100vw;
  margin-left:calc(50% - 50vw);
  position:relative;
  overflow:hidden;
  padding:clamp(70px,8vw,110px) 24px;
}

.bf-sister-title{
  margin:0 0 clamp(40px,5vw,70px);
  text-align:center;

  font-family:"Tilt Warp", sans-serif;
  font-size:clamp(40px,6vw,92px);
  line-height:.9;
  text-transform:uppercase;
  color:white;
}

/* =========================================================
   GRID / SLIDER
========================================================= */

.bf-sister-slider{
  width:min(1440px,100%);
  margin:0 auto;

  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(18px,2vw,26px);
}

.bf-sister-slide{
  min-width:0;
}

/* =========================================================
   CARD
========================================================= */

.bf-sister-card{
  position:relative;
 aspect-ratio:16 / 9;

  min-height:auto;  
	overflow:hidden;
  border-radius:22px;
  background:#12051f;
  text-decoration:none;
  display:block;

  transition:
    transform .35s ease,
    box-shadow .35s ease;

  will-change:transform;
}

.bf-sister-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:10;
  pointer-events:none;
  border-radius:22px;
  padding:2px;

  background:linear-gradient(
    130deg,
    #ffffff,
    #efb400,
    #F4A6D7,
    #6b35d6,
    #ffffff
  );

  background-size:300% 300%;
  animation:bfSisterBorderFlow 7s linear infinite;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);

  -webkit-mask-composite:xor;
  mask-composite:exclude;
}

.bf-sister-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.45),
      rgba(0,0,0,.08) 34%,
      rgba(0,0,0,.9)
    );
  pointer-events:none;
}

.bf-sister-card img{
  position:absolute;
  inset:0;
  z-index:1;

  width:100%;
  height:100%;
  object-fit:cover;
  display:block;

  transition:
    transform .8s cubic-bezier(.2,.8,.2,1),
    filter .45s ease;
}

.bf-sister-card h3{
  position:absolute;
  left:22px;
  right:22px;
  bottom:28px;
  z-index:5;

  margin:0;
  text-align:center;

  font-family:"Tilt Warp", sans-serif;
  font-size:clamp(28px,2.4vw,44px);
  line-height:.9;
  text-transform:uppercase;
  color:white;

  text-shadow:0 8px 28px rgba(0,0,0,.75);
}

/* =========================================================
   HOVER
========================================================= */

.bf-sister-card:hover{
  transform:translateY(-12px) scale(1.025);
}

.bf-sister-card:hover img{
  transform:scale(1.08);
  filter:brightness(.88) saturate(1.08);
}

@media (hover:none){

  .bf-sister-card:hover{

    transform:none;

    box-shadow:

      0 22px 55px rgba(0,0,0,.38),

      0 0 18px rgba(130,0,255,.12);

  }

  .bf-sister-card:hover img{

    transform:none;

    filter:none;

  }

}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes bfSisterBorderFlow{
  0%{ background-position:0% 50%; }
  100%{ background-position:300% 50%; }
}

/* =========================================================
   RESPONSIV
========================================================= */

@media (max-width:1180px){

  .bf-sister-slider{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .bf-sister-card{
    aspect-ratio:16 / 10;	  
  }
}

@media (max-width:640px){

  .bf-sister-slider-section{
    padding:20px 16px 40px;
  }

  .bf-sister-slider{
    display:flex;
    overflow-x:auto;
    gap:16px;
    padding-bottom:8px;
    flex:0 0 82vw;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }

  .bf-sister-slider::-webkit-scrollbar{
    display:none;
  }

  .bf-sister-slide{
    flex:0 0 78vw;
    scroll-snap-align:center;
  }

  .bf-sister-card{
aspect-ratio:4 / 3;

    min-height:auto;  }
}