@charset "UTF-8";

/* DESKTOP */
@media screen and (min-width: 1280px) {
  /* Query Rules */
  .media-mobile {
    display: none !important;
  }
  .media-reduced {
    display: none !important;
  }
  .media-not-desktop {
    display: none !important;
  }

  .benefit-content {
    grid-column-end: span 3;
  }

  #responsive-menu {
    display: none !important;
  }
}

/* REDUCED */
@media screen and (min-width: 920px) and (max-width: 1279px) {
  /* Query Rules */
  .media-desktop {
    display: none !important;
  }
  .media-mobile {
    display: none !important;
  }
  .media-not-reduced {
    display: none !important;
  }

  h2 {
    font-size: 3rem;
  }
  h3 {
    font-size: 1.4rem;
  }

  .benefit {
    --cols: 3 !important;
  }  
  .benefit-content {
    grid-column-end: span 2;
  }
  .big {
    font-size: 1.2rem;
  }
  .double-gap.grid-2-cols,
  .double-gap.grid-3-cols,
  .double-gap.grid-4-cols,
  .double-gap.grid-5-cols {
    gap: var(--doc-padding);
  }
  .grid-4-cols {
    --cols: 2;
  }
  .grid-5-cols {
    --cols: 3;
  }

  #big-cover {
    grid-template-columns: 1fr 50%;
    gap: 0px;
  }
    #big-cover .logo {
      top: 12%;
    }
  #hero-slideshow slide {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "article img";
  }
  #login-screen {
    grid-template-columns: 75%;
  }  
}

/* MOBILE */
@media screen and (max-width: 919px) {
  /* Query Rules */
  .media-desktop {
    display: none !important;
  }
  .media-reduced {
    display: none !important;
  }
  .media-not-mobile {
    display: none !important;
  }

  :root {
    --doc-padding: 1.5rem;
    --double-padding: 2.8rem;
  }
  
  h2 {
    font-size: 2.5em;
  }
  h3 {
    font-size: 1.3em;
  }
  main {
    padding: 0px;
  }
    main > section, .main-section {
      padding: var(--doc-padding);
      text-align: center;
    }
  
  .benefit {
    --cols: 1 !important;
  }
  .benefit-content {
    grid-column-end: span 1;
  }
  .big {
    font-size: 1.1rem;
  }
  .brief-table {
    font-size: 0.8em;
  }
  .collection-title {
    background-color: color-mix(in srgb, var(--brand-blue), transparent 40%);
    box-shadow: none;
    border: none;
    height: 100%;
  }
    .collection-title h1 {
      text-align: left;
      word-break: break-word;
      color: white;
    }
  .double-gap.grid-2-cols,
  .double-gap.grid-3-cols,
  .double-gap.grid-4-cols,
  .double-gap.grid-5-cols {
    gap: var(--doc-padding);
  }
  .flex-column {
    align-items: center;
  }
  .grid-2-cols,
  .grid-3-cols {
    --cols: 1;
  }
  .grid-4-cols,
  .grid-5-cols {
    --cols: 2;
  }
  .grid-1-2-cols {
    grid-template-columns: 1fr;
  }
  .no-content {
    font-size: 1.5em;
  }

  #big-cover {
    grid-template-columns: 1fr;
    gap: 0px;
    min-height: 65vh;
    background-position: 10%;
  }
    #big-cover .logo {
      top: var(--double-padding);
      width: 80%;
      margin: 1em 0;
    }
  #cart-page {
    padding: var(--doc-padding);
  }
  #cart-summary div:last-child {
    align-items: center;
  }
  #collection-breadcrumbs {
    padding: 0 var(--doc-padding);
  }
  #collection-content {
    grid-template-columns: 1fr;
    padding: 0 var(--doc-padding);
  }
  #collection-cover {
    grid-template-columns: 1fr;
    min-height: 15em;
  }
  #contact-form > .grid-2-cols {
    grid-row-gap: 0px;
  }
  #hero-slideshow slide {
    grid-template-columns: 1fr;
  }
  #hero-slideshow slide > * {
    grid-area: auto !important;
    grid-column: 1 / 2;
  }
  #hero-slideshow slide article {
    background-color: #2BAFE5CC;
    z-index: 2;
    align-items: center;
    text-align: center;
  }
  #login-screen {
    grid-template-columns: 100%;
    padding: var(--double-padding)
  }
  #products-grid {
    grid-column-start: 1;
    grid-template-columns: 1fr;
  }
  #product-info {
    justify-items: center;
  }
  #team-grid {
    --cols: 1;
  }
}