/* Stable related-resource carousel: exact 3/2/1-card geometry, independent of Gutenverse Swiper. */
.psp-resource-carousel .psp-resource-carousel-shell{
  width:100%;
  min-width:0;
  box-sizing:border-box;
  padding:10px 24px 14px;
}

.psp-resource-carousel .psp-resource-carousel-viewport{
  width:100%;
  min-width:0;
  overflow:hidden;
}

.psp-resource-carousel .psp-resource-cards{
  --psp-gap:40px;
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:stretch!important;
  gap:var(--psp-gap)!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
  list-style:none!important;
  transform:translate3d(0,0,0);
  will-change:transform;
}

.psp-resource-carousel .psp-resource-card{
  box-sizing:border-box!important;
  display:flex!important;
  flex:0 0 calc((100% - (2 * var(--psp-gap))) / 3)!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:0!important;
  min-height:238px!important;
  height:auto!important;
  margin:0!important;
  padding:30px 22px 28px!important;
  background:#fff;
  box-shadow:0 0 10px rgba(1,1,1,.1);
  text-align:center;
}

.psp-resource-carousel .psp-resource-card h3{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
  width:100%!important;
  min-height:2.6em!important;
  margin:0 0 26px!important;
  font-size:16px!important;
  line-height:1.3!important;
  letter-spacing:0!important;
  text-wrap:balance;
}

.psp-resource-carousel .psp-resource-button{
  margin-top:0!important;
}

@media(max-width:1024px){
  .psp-resource-carousel .psp-resource-carousel-shell{
    padding-left:18px;
    padding-right:18px;
  }

  .psp-resource-carousel .psp-resource-cards{
    --psp-gap:28px;
  }

  .psp-resource-carousel .psp-resource-card{
    flex-basis:calc((100% - var(--psp-gap)) / 2)!important;
  }
}

@media(max-width:767px){
  .psp-resource-carousel .psp-resource-carousel-shell{
    padding-left:12px;
    padding-right:12px;
  }

  .psp-resource-carousel .psp-resource-cards{
    --psp-gap:18px;
  }

  .psp-resource-carousel .psp-resource-card{
    flex-basis:100%!important;
    min-height:210px!important;
    padding:28px 20px 24px!important;
  }

  .psp-resource-carousel .psp-resource-card h3{
    min-height:2.6em!important;
    margin-bottom:22px!important;
    font-size:16px!important;
    line-height:1.3!important;
  }
}