.tsfb-wrap{
  --tsfb-red: #C00000;
  --tsfb-red2:#A80000;
  background:#ffffff;
  padding: 26px 0;
}

.tsfb-inner{
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto;
}

.tsfb-title{
  text-align:center;
  margin: 0 0 18px;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: .2px;
}
.tsfb-title-strong{ color: var(--tsfb-red); }
.tsfb-title-light{ color: #111; font-weight: 400; }

.tsfb-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.tsfb-card{ min-height: 340px; }

.tsfb-flip{
  position: relative;
  width:100%;
  height: 340px;
  border-radius: 10px;
  perspective: 1000px;
  outline: none;
}

.tsfb-face{
  position:absolute;
  inset:0;
  border-radius: 10px;
  overflow:hidden;
  backface-visibility:hidden;
  transform-style: preserve-3d;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}

.tsfb-front{
  background-size: cover;
  background-position: center;
  transform: rotateY(0deg);
}

.tsfb-front-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(0,0,0,.35), rgba(0,0,0,.15));
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
}

.tsfb-front-title{
  color:#fff;
  font-size: 30px;
  font-weight: 600;
  text-shadow: 0 8px 18px rgba(0,0,0,.35);
}

.tsfb-back{
  background: linear-gradient(135deg, var(--tsfb-red), var(--tsfb-red2));
  transform: rotateY(180deg);
  padding: 18px 18px 16px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  color:#fff;
}

.tsfb-back-title{
  font-size: 26px;
  font-weight: 600;
  margin: 2px 0 0;
}

.tsfb-back-text{
  font-size: 14.5px;
  line-height: 1.55;
  opacity: .98;
}

.tsfb-flip:hover .tsfb-front,
.tsfb-flip:focus-within .tsfb-front,
.tsfb-flip.is-flipped .tsfb-front{
  transform: rotateY(-180deg);
  transition: transform .65s cubic-bezier(.2,.7,.2,1);
}
.tsfb-flip:hover .tsfb-back,
.tsfb-flip:focus-within .tsfb-back,
.tsfb-flip.is-flipped .tsfb-back{
  transform: rotateY(0deg);
  transition: transform .65s cubic-bezier(.2,.7,.2,1);
}

.tsfb-front, .tsfb-back{
  transition: transform .65s cubic-bezier(.2,.7,.2,1);
}

/* Responsive */
@media (max-width: 980px){
  .tsfb-grid{ grid-template-columns: 1fr; }
  .tsfb-card{ min-height: 320px; }
  .tsfb-flip{ height: 320px; }
  .tsfb-title{ font-size: 30px; }
}