/* benefit-cards breakpoints, loaded after the shared ones. */
.why-idris__controls { display: none; }
@media (max-width: 900px) {
  .why-idris__controls { display: flex; margin-top: 40px; padding-inline: 16px; }
}

@media (max-width: 900px) {
  .why-idris { padding: 0; }
  .why-idris .web-section-intro h2 { margin-top: 32px; font-size: 32px; }
  .why-idris__viewport { width: 100%; margin-top: 40px; overflow-x: auto; scroll-padding-inline: 16px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .why-idris__grid { display: flex; width: max-content; gap: 16px; padding-inline: 16px; }
  .why-card { width: 300px; min-height: 325px; flex: none; padding: 24px 24px 0; scroll-snap-align: start; grid-area: auto !important; }
  .why-card h3 { font-size: 24px; }
  .why-card p { max-width: 232px; font-size: 16px; }
  .why-card img { width: 92%; height: 58%; }
  .why-idris__action { margin-top: 60px; }
  body.web-development-page .why-idris .eyebrow { width: 100px; padding: 0; }
  body.web-development-page .why-idris h2 { width: auto; }
  body.web-development-page .why-idris { padding: 0 0 86px; }
  body.web-development-page .why-idris__viewport { width: 100%; padding-inline: 0; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: 16px; scroll-snap-type: x mandatory; }
  body.web-development-page .why-idris__grid { display: flex; width: max-content; margin-top: 33.8px; padding-inline: 16px; gap: 16px; grid-template-columns: none; grid-template-rows: none; }
  body.web-development-page .why-idris__grid .why-card { width: 300px; height: 325px; flex: none; padding: 15px 0 0 16px; scroll-snap-align: start; grid-area: auto !important; align-self: start !important; }
  body.web-development-page .why-idris__grid .why-card--wine { padding: 16px 0 0 17px; }
  body.web-development-page .why-card h3 { max-width: 268px; font-size: 24px; line-height: 24px; }
  body.web-development-page .why-card p, body.web-development-page .why-card:nth-child(2) p, body.web-development-page .why-card:nth-child(3) p, body.web-development-page .why-card:nth-child(4) p { max-width: 240px; margin-top: 11.5px; font-size: 16px; line-height: 24px; }
  body.web-development-page .why-card:nth-child(1) img { left: 34px; top: 210px; width: 250px; height: 167px; }
  body.web-development-page .why-card:nth-child(2) img { left: 100px; top: 120px; width: 200px; height: 726px; }
  body.web-development-page .why-card:nth-child(3) img { left: 40px; top: 200px; width: 260px; height: 173px; }
  body.web-development-page .why-card:nth-child(4) img { left: 40px; top: 60px; width: 280px; height: 187px; }
  body.web-development-page .why-card:nth-child(5) img { left: -20px; top: 120px; width: 360px; height: 240px; }
  body.web-development-page .why-card--road img { left: 0; top: 150px; width: 300px; height: 102px; }
  body.web-development-page .why-idris__action { margin-top: 64px; }
}