/* responsive.css - mobile-first responsive rules */

/* Mobile defaults already applied. Tablet and desktop breakpoints below. */

@media (min-width: 600px){
  .voucher-grid{grid-template-columns:repeat(2,1fr)}
  .voucher-card{align-items:center}
}

@media (min-width: 1024px){
  .container{padding:0 24px}
  .voucher-grid{grid-template-columns:repeat(3,1fr)}
  .hero__title{font-size:calc(var(--heading-1) + 0.3rem)}
  .hero__subtitle{font-size:1.125rem}
  .campaigns{padding:var(--space-xl)}
  .campaign-section{display:flex;gap:20px;align-items:flex-start}
  .campaign-section .campaign-banner{flex:1}
  .campaign-section .campaign-body{flex:1}
  .voucher-card{flex-direction:column;align-items:stretch}
  .voucher-card__img{height:140px;width:100%}
  /* larger banner height on desktop */
  .campaign-banner img{height:220px}
  .voucher-card__actions .btn-primary{width:auto}
  .footer-inner{flex-direction:row;justify-content:space-between}
}