/* ========================================================================== 
   Semioticom keys element refresh / overflow containment
   Purpose: prevent the Keys element from widening the mobile document.
   This file is intentionally separate from main.min.css and refresh.css.
   ========================================================================== */

section.keys,
section.keys *{
  box-sizing: border-box;
}

section.keys{
  max-width: 100%;
  overflow-x: clip;
}

section.keys > .container,
section.keys > .container-fluid{
  max-width: 100%;
  overflow-x: clip;
}

section.keys .row,
section.keys .items,
section.keys .footer{
  max-width: 100%;
  min-width: 0;
}

section.keys [class*="col"]{
  min-width: 0;
  max-width: 100%;
}

section.keys img,
section.keys .image{
  display: block;
  max-width: 100%;
  height: auto;
}

section.keys h1,
section.keys h2,
section.keys h3,
section.keys h4,
section.keys h5,
section.keys h6,
section.keys p,
section.keys .text,
section.keys .description,
section.keys .section-description{
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (max-width: 767.98px){
  section.keys{
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  section.keys > .container,
  section.keys > .container-fluid{
    width: min(100%, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    margin-left: auto;
    margin-right: auto;
    overflow-x: clip;
  }

  section.keys .row{
    width: 100%;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  section.keys .row > [class*="col"]{
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  section.keys .items{
    gap: 16px;
  }

  section.keys .items > [class*="col"]{
    margin-top: 0;
  }

  section.keys .items > [class*="col"] > *{
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

@supports not (overflow: clip){
  section.keys,
  section.keys > .container,
  section.keys > .container-fluid{
    overflow-x: hidden;
  }
}