/* Desktopové doladenie kariet v sekcii Prečo Hravo & Tvorivo. */
@media (min-width: 1121px) {
  .why-faq {
    /*
     * RUČNÉ NASTAVENIE DESKTOPOVEJ SEKCIE
     *
     * Stĺpce a medzera sú nastavené rovnako ako v hornej rodičovskej sekcii,
     * aby ich vonkajšie okraje aj stredová deliaca čiara presne lícovali.
     */
    --why-left-column-share: 1fr;
    --why-right-column-share: 1fr;
    --why-panels-gap: 20px;

    /* Ručné nastavenie kariet v ľavom paneli. */
    --why-panel-padding-x: 8px;
    --why-card-gap: 2px;
    --why-card-aspect-ratio: 2 / 3;
    --why-card-background-width: 100%;

    /* Kompaktnejšia pravá strana udrží prirodzenejší pomer ľavých kariet. */
    --why-faq-row-gap: 6px;
    --why-faq-row-height: 42px;
    --why-title-gap: 16px;
  }

  .why-faq .lower-grid {
    grid-template-columns:
      minmax(0, var(--why-left-column-share))
      minmax(0, var(--why-right-column-share));
    gap: var(--why-panels-gap);
  }

  .why-faq .why-panel {
    padding: 20px var(--why-panel-padding-x);
  }

  .why-faq .faq-panel {
    padding: 20px 18px;
  }

  .why-faq .why-panel h2,
  .why-faq .faq-panel h2 {
    margin-bottom: var(--why-title-gap);
  }

  .why-faq .why-grid {
    flex: 0 0 auto;
    grid-auto-rows: auto;
    align-items: start;
    gap: var(--why-card-gap);
  }

  .why-faq .why-grid > div {
    min-height: 0;
    height: auto;
    aspect-ratio: var(--why-card-aspect-ratio);
    background-size: var(--why-card-background-width) 100%;
  }

  .why-faq .faq-list {
    gap: var(--why-faq-row-gap);
  }

  .why-faq .faq-list summary {
    min-height: var(--why-faq-row-height);
    padding: 8px 16px;
  }
}