/* Product card */
.pc{--fg:#fff;--rule:#fff;position:relative;display:flex;flex-direction:column;gap:16px;padding:20px 20px 24px;border-radius:25px;background:var(--navy);color:var(--fg);
  transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.pc:hover{transform:scale(1.02)}
.pc--white{background:#fff;--fg:var(--navy);--rule:var(--navy)}
.pc--yellow{background:var(--yel);--fg:var(--navy);--rule:var(--navy)}
.pc--light{background:#FFDA4B;--fg:var(--navy);--rule:#494949}
.pc--pink{background:var(--pink)}
.pc__img{display:block}
.pc__img img{width:100%;height:300px;object-fit:cover;border-radius:18px}
.pc__head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap}
.pc__title{font-family:var(--f-black);font-size:28px;line-height:1.1;color:var(--fg);width:72%}
.pc__title a:hover{color:var(--pink)}
.pc--pink .pc__title a:hover{color:var(--yel)}
.pc__icon{width:70px;height:70px;border-radius:58px;background:var(--pink);padding:15px;display:grid;place-items:center;transition:transform .4s}
.pc__icon:hover{transform:rotate(45deg)}
.pc__icon img{width:100%;height:auto}
.pc__rule{width:100%;border:0;border-top:2px solid var(--rule);margin:2px 0}
.pc__text{font-family:var(--f-body);font-size:15px;line-height:1.6;color:var(--fg)}
.pc__meta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-top:auto}
.pc__price{font-family:var(--f-black);font-size:26px;line-height:1;color:var(--fg)}
.pc__spec{font-family:var(--f-display);font-size:13px;line-height:1;color:var(--fg)}
/* large cards (Our beers) */
.pc--large:hover{transform:rotate(2deg) scale(1.02)}
.pc--large .pc__img img{height:380px}
.pc--large .pc__title{font-size:36px;width:75%}
.pc--large .pc__text{font-size:17px}
.pc--large .pc__price{font-size:32px}
.pc--large .pc__spec{font-size:16px}
.pc--light.pc--large .pc__btn{--b-hbg:var(--pink)}
@media (max-width:1024px){
  .pc__title{font-size:30px}.pc__text{font-size:13px}.pc__price{font-size:28px}.pc__spec{font-size:14px}
  .pc__icon{width:50px;height:50px;padding:10px}
  .pc--large .pc__title{font-size:30px}.pc--large .pc__text{font-size:13px}.pc--large .pc__price{font-size:28px}.pc--large .pc__spec{font-size:14px}
}
@media (max-width:767px){
  .pc{text-align:center}
  .pc__head,.pc__meta{justify-content:center}
  .pc__title,.pc--large .pc__title{font-size:26px;width:auto}
  .pc__price,.pc--large .pc__price{font-size:26px}
  .pc__img img{height:225px}.pc--large .pc__img img{height:285px}
}