/* Phone and tablet layout. Applies only below 1100px.
   Desktop grid-area rules in the page stylesheets stay in effect at 1100px and up.
   This file is linked last so these overrides beat generated grid placement. */

@media (max-width: 1099px) {
  body {
    overflow-x: clip;
  }

  .layout-engine-section .content,
  .layout-engine-section .content > div,
  .content-wrapper,
  .page-section {
    min-width: 0;
    max-width: 100%;
  }

  .fluid-engine {
    grid-template-columns:
      minmax(1.25rem, 6vw)
      minmax(0, 1fr)
      minmax(1.25rem, 6vw) !important;
    grid-template-rows: auto !important;
    grid-auto-rows: auto;
    row-gap: 1.25rem !important;
    column-gap: 0 !important;
    overflow-x: visible !important;
  }

  .fluid-engine > .fe-block {
    grid-area: auto / 2 / auto / -2 !important;
    position: relative;
    width: auto;
    min-width: 0;
  }

  .fluid-engine > .fe-block > .sqs-block {
    height: auto;
  }

  /* Short text pages should not sit in a 66vh empty band. Photo heroes keep their height. */
  .page-section.section-height--medium:not(.has-background) {
    min-height: 0;
  }

  .fluid-image-component-root,
  .fluid-image-animation-wrapper,
  .fluid-image-container,
  .js-content-mode-element-wrapper,
  .js-content-mode-element {
    height: auto !important;
  }

  .fluid-image-container img {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
  }

  .sqs-html-content,
  .list-item-content__description,
  .list-item-content__title {
    overflow-wrap: break-word;
    max-width: 100%;
  }

  .user-items-list-item-container {
    grid-gap: 1.5rem !important;
  }

  .sqs-stretched {
    height: auto;
  }

  .sqs-stretched .sqs-block-button-element {
    width: auto;
    max-width: 20rem;
  }

  #footer-sections .sqs-html-content p {
    white-space: normal !important;
  }

  #footer-sections .sqs-html-content a {
    display: inline-block;
    margin: 0.35rem 0.85rem 0.35rem 0;
  }
}

@media (max-width: 699px) {
  /* Home hero is a 10vh custom section. Give the photo room on a phone. */
  .page-section.has-background.section-height--custom {
    min-height: 50vh !important;
  }

  .sqs-stretched .sqs-block-button-element,
  .list-item-content__button-container:not(.list-item-content--hidden),
  a.list-item-content__button {
    display: block;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
  }
}