/* The existing swipe rails keep their desktop design and keyboard behaviour. */
@media screen and (max-width: 767px) {
  .production.home #mainContent .sm2-fold #certificates {
    background: transparent;
  }
  .production.home #mainContent .sm2-fold #certificates > .wrap {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
  }
  .production.home #mainContent #certificates .content-section-head {
    padding: 0;
    margin-block: 0 18px;
    background: transparent;
    transform: none;
  }
  .production.home #mainContent #certificates .section-lead {
    margin: 0;
    max-width: none;
    background: transparent;
  }

  .production #mainContent :is(#trustDocuments,#certificateTeaser,#certificateCards,.document-record-grid) {
    align-items: start;
    max-width: 100%;
    min-width: 0;
    transform: none;
  }
  .production #mainContent :is(#trustDocuments,#certificateTeaser,#certificateCards,.document-record-grid)
    > :is(.trust-card,.certificate-card,.document-record) {
    display: grid;
    box-sizing: border-box;
    grid-template: none / minmax(0, 1fr);
    grid-auto-rows: max-content;
    align-self: start;
    align-content: start;
    justify-items: stretch;
    gap: 14px;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    flex: 0 0 100% !important;
    min-height: 0;
    height: auto;
    padding: clamp(16px, 5vw, 20px);
  }
  .production #mainContent :is(#trustDocuments,#certificateTeaser,#certificateCards,.document-record-grid)
    > :is(.trust-card,.certificate-card,.document-record) > * {
    grid-area: auto / 1;
    order: 0;
    min-width: 0;
    margin: 0;
  }
  .production #mainContent :is(#trustDocuments,#certificateTeaser,#certificateCards,.document-record-grid)
    > :is(.trust-card,.certificate-card,.document-record) > div {
    display: grid;
    gap: 7px;
    align-content: start;
    padding: 0;
    background: transparent;
  }
  .production #mainContent :is(#trustDocuments,#certificateTeaser,#certificateCards,.document-record-grid)
    :is(.trust-kind,.content-kicker,.certificate-heading-v35,.content-link) {
    justify-self: start;
  }
  .production #mainContent :is(#trustDocuments,#certificateTeaser,#certificateCards,.document-record-grid)
    :is(.trust-card,.certificate-card,.document-record) :is(h2,h3,p) {
    margin: 0;
  }
  .production #mainContent :is(#trustDocuments,#certificateTeaser,#certificateCards,.document-record-grid)
    :is(.trust-card,.certificate-card,.document-record) :is(.document-thumb,.certificate-thumb,.document-card-preview) {
    display: grid;
    place-items: center;
    grid-template-columns: minmax(0, 1fr);
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    aspect-ratio: auto;
  }
  .production #mainContent :is(#certificateTeaser,#certificateCards) .certificate-thumb picture {
    display: block;
    width: 100%;
    height: auto !important;
    max-height: none !important;
  }
  .production #mainContent :is(#trustDocuments,#certificateTeaser,#certificateCards,.document-record-grid)
    :is(.trust-card,.certificate-card,.document-record) :is(.document-thumb,.certificate-thumb,.document-card-preview) img {
    display: block;
    box-sizing: border-box;
    width: 100% !important;
    max-width: min(100%, var(--public-page-width, 100%)) !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto;
    object-fit: contain;
    margin: 0 auto;
  }
}