.pipper-short-wrap{

  width:100%;

  box-sizing:border-box;

}

.pipper-short-layout{

  --pipper-cards-col: minmax(240px, 1fr);

  --pipper-video-col: clamp(240px, 32%, 340px);

  display:grid;

  grid-template-columns:var(--pipper-cards-col) var(--pipper-video-col);

  gap:20px;

  align-items:start;

  justify-content:start;

  width:100%;

  box-sizing:border-box;

}

.pipper-short-grid{

  display:grid;

  grid-template-columns:1fr;

  grid-template-rows:repeat(4,1fr);

  gap:12px;

  height:calc(clamp(240px, 32vw, 340px) * 16 / 9);

  box-sizing:border-box;

  min-width:0;

}

.pipper-short-card{

  background:#fff;

  border:1px solid #f3e7e5;

  border-radius:26px;

  padding:14px 12px;

  text-align:center;

  box-shadow:0 10px 25px -8px rgba(227,112,98,0.12);

  box-sizing:border-box;

  min-height:0;

  display:flex;

  flex-direction:column;

  justify-content:center;

  overflow:hidden;

}

.pipper-short-icon{

  width:40px;

  height:40px;

  margin:0 auto 8px;

  border-radius:50%;

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:16px;

  line-height:1;

  background:#fdecea;

}

.pipper-short-icon.blue{

  background:rgba(121,153,217,0.14);

}

.pipper-short-title{

  margin:0 0 6px;

  font-size:9px;

  line-height:1.25;

  font-weight:800;

  text-transform:uppercase;

  letter-spacing:0.8px;

  color:#1f2937;

}

.pipper-short-text{

  margin:0;

  font-size:10px;

  line-height:1.35;

  color:#9ca3af;

  font-weight:700;

}

.pipper-video-card{

  background:#fff;

  border:1px solid #f3e7e5;

  border-radius:26px;

  overflow:hidden;

  box-shadow:0 10px 25px -8px rgba(227,112,98,0.12);

  box-sizing:border-box;

  align-self:start;

  width:100%;

  max-width:100%;

  justify-self:stretch;

}

.pipper-video-stage{

  position:relative;

  width:100%;

  aspect-ratio:9/16;

  background:#fef9f9;

  overflow:hidden;

}

.pipper-video-button{

  position:absolute;

  inset:0;

  display:block;

  width:100%;

  height:100%;

  border:0;

  padding:0;

  background:#fef9f9;

  cursor:pointer;

  overflow:hidden;

}

.pipper-video-button img{

  width:100%;

  height:100%;

  object-fit:cover;

  object-position:center;

  display:block;

}

.pipper-video-overlay{

  position:absolute;

  inset:0;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  padding:22px;

  text-align:center;

  background:linear-gradient(to top, rgba(17,24,39,0.72), rgba(17,24,39,0.18));

}

.pipper-video-play{

  width:72px;

  height:72px;

  border-radius:50%;

  background:#e37062;

  display:flex;

  align-items:center;

  justify-content:center;

  box-shadow:0 10px 25px rgba(227,112,98,0.28);

}

.pipper-video-play::before{

  content:'';

  display:block;

  width:0;

  height:0;

  margin-left:4px;

  border-top:12px solid transparent;

  border-bottom:12px solid transparent;

  border-left:18px solid #fff;

}

.pipper-video-play::after{

  content:none;

}

.pipper-video-label{

  display:none;

}

.pipper-video-subtext{

  display:none;

}

.pipper-video-frame{

  position:absolute;

  inset:0;

  display:none;

  width:100%;

  height:100%;

  border:0;

}

.pipper-video-note{

  display:none;

}

@media (max-width: 980px){

  .pipper-short-layout{

    grid-template-columns:1fr;

    gap:16px;

  }

  .pipper-short-grid{

    grid-template-columns:repeat(2,minmax(0,1fr));

    grid-template-rows:auto;

    gap:12px;

    height:auto;

  }

  .pipper-video-card{

    width:100%;

    max-width:420px;

    justify-self:center;

  }

}

@media (max-width: 640px){

  .pipper-short-layout{

    grid-template-columns:1fr;

    gap:14px;

  }

  .pipper-short-grid{

    grid-template-columns:repeat(2,minmax(0,1fr));

    grid-template-rows:auto;

    gap:12px;

    height:auto;

  }

  .pipper-short-card,

  .pipper-video-card{

    border-radius:22px;

  }

  .pipper-short-card{

    padding:16px 10px;

  }

  .pipper-short-icon{

    width:40px;

    height:40px;

    margin-bottom:10px;

    font-size:17px;

  }

  .pipper-short-title{

    font-size:9px;

    line-height:1.25;

    margin-bottom:6px;

  }

  .pipper-short-text{

    font-size:10px;

    line-height:1.4;

  }

  .pipper-video-card{

    width:100%;

    max-width:100%;

    justify-self:center;

  }

  .pipper-video-play{

    width:62px;

    height:62px;

  }

  .pipper-video-play::before{

    margin-left:3px;

    border-top:10px solid transparent;

    border-bottom:10px solid transparent;

    border-left:15px solid #fff;

  }

  .pipper-video-play::after{

    content:none;

  }

}