/* 

   Wolfram CAG stylesheet

   developer:   estevaot
   requires:    /common/framework/css/framework.css
                
   ========================================================================== */

/* ==========================================================================
   Global
   ========================================================================== */
main { 
   font-family:'Source Sans Pro', Arial, sans-serif; 
   font-size: 1rem;
   color: #3b3b3b;
}

#announce-stripe { display:none !important }

:root {
   --primary-color:#ebf2fb;
   --secondary-color:#053d7c;
   --tertiary-color:#f95e00;
}

:target {
   scroll-margin-top: 70px;
}

/* ==========================================================================
   Shared
   ========================================================================== */
main {
   & img { 
      width: 100%;
   }
   & .wrapper { 
      max-width:1050px; 
      margin: 0 auto;
      padding: 3.125rem 1rem;
   }
   & h2 {
     font-size: 2rem;
     font-weight: 500;
     line-height: 1.23;
     color: var(--secondary-color);
   }
   & a {
      font-weight: 600;
      color: #2a7eb9;
      &:hover { color: var(--secondary-color); }
   }
   & .separator-top { border-top: 2px solid #dbdbdb; }
   & .separator-bottom { border-bottom: 2px solid #dbdbdb; }
   & li { 
      display:list-item; 
   }
}

/* Sections
   ========================================================================== */

section:is(.bg-contrast-light,.cag-apart, .gallery-wrapper, .faq) .wrapper > h2 { 
   margin-top: 1.375rem; 
   margin-bottom: 2rem; 
   text-align: center;
}

/* Buttons
   ========================================================================== */

.btn,
a.btn {
   display: inline-flex;
   padding: .325rem 2.1875rem .33rem 1.9375rem;
   /*padding: .625rem 2.1875rem .6875rem 1.9375rem;*/
   background-color: var(--tertiary-color);
   font-weight: 600;
   font-size: 1rem;
   border:1px solid #fff;
   border-radius: 6px;
   color: #fff;
   &:hover {
      background-color: transparent;
      color: var(--tertiary-color);
      border-color:var(--tertiary-color);
   }
   @media (max-width: 600px) {
      font-size: 1.25rem;
   }
}



/* Backgrounds
   ========================================================================== */
.bg-contrast-light { background-color: #ebf2fb; }
.bg-contrast { background-color: var(--primary-color); }
.bg-contrast-dark { 
   background: linear-gradient(#171d34 50%,#0f2e53 90%);
   & a { color: #fcb802; }
   & a:hover { color: var(--tertiary-color); }
   @media (max-width: 600px) {
      background:linear-gradient(#171d34 80%,#0f2e53 95%);
   }
}

/* Media list / Cards
   ========================================================================== */
.media-list {
   display: grid;
   grid-template-columns: 1fr;
   gap: 2.625rem;
   & img {
      /*max-width: 80%;*/
   }
   & div:has(> img) {
      text-align: center;
      padding-top: 1rem;
      align-self: center;
   }
   & .fake-h3 {
      font-size: 1.3rem;
      font-weight: 600;
      margin-bottom: .4rem;
      margin-top: 1.3rem;
   }
}

.media-list .links-list a {
   line-height: 2.13;
   display: table;
   @media (max-width: 600px) {
      font-size: 1.13rem;
   }
}

.media-list > div {
   display: grid;
   grid-template-columns: 1fr .7fr;
   padding: 2.5rem 2.9rem;
   padding-right: 0;
   background: #fff;
   border-radius: 10px;
   &:nth-child(n+3) {
      grid-column: 1 / -1;
   }
   &:last-child {
      background: none;
      grid-template-columns: 1fr;
      padding-block: 0;
      & div:first-child h3 {
         font-size: 1.28125rem;
         line-height: 1.17;
         color: #2a7eb9;
         margin-top: 0;
      }
   }
   & .btn,
   & .btn.btn-outline:hover {
      color: #fff;
      border-color: #2a7eb9;
      background: #2a7eb9;
      min-width: 160px;
      justify-content: center;
      align-self: center;
      text-align: center;
      padding-block: 5px;
   }
   & .btn:hover {
      background: var(--secondary-color);
      color: #fff;
   }
   & .btn.btn-outline {
      background: #fff;
      color: #2a7eb9;
   }
}

.media-list .icon {
   & h2 {
      display: grid;
      align-items: center;
      gap: .5rem;
      grid-auto-flow: column;
      justify-content: flex-start;
      @media (max-width: 600px) { display:block; }
   }
   & :is(.icon-mcp, .icon-agentOne, .icon-cag) {
      display: inline-block;
      width: 50px;
      height: 50px;
   }
   & .icon-mcp {
      background:center url(../img/wolfram-mcp-service.svg) no-repeat;
      background-size: 49px 47px;
   }
   & .icon-agentOne {
      background:center url(../img/wolfram-agent-one.svg) no-repeat;
   }
   & .icon-cag {
      background:center url(../img/wolfram-cag-1.svg) no-repeat;
      background-size: 50px 50px;
   }
}

.media-list .media-list__product-name {
   grid-column: 1 / -1;
   & h2 {
      font-size: 2.25rem;
      font-weight: 600;
      color: #222;
      & span.light {
         font-weight: 400;
         color: #606060;
      }
   }
}

.media-list .media__icon-text {
   & h3 {
      font-size: 1.3rem;
      color: #222;
      font-weight: 600;
      margin-bottom: .4rem;
      margin-top: 1.3rem;
   }
   & p {
      margin-bottom: 1.4375rem; 
   }
   & li {
      list-style-type: disc;
      list-style-position: inside;
   }
}

.media-list :is(p,li) {   
   font-size: 1.13rem;
   color: #535353;
   line-height: 1.4;
   & > i {
      color: #636363;
   }
}

.media__icon-text {
   display: grid;
   grid-template-columns: 1fr;
   grid-column-gap: 1.6875rem;
   & h3 {
      font-size: 1.26rem;
      font-weight: 600;
      line-height: 1.2;
      text-align: left;
      color: #555;
      margin-bottom: .2rem;
   }
}
.media__text {
   padding-left: calc(1.6875rem + 50px);
}

/*.media-list .media__horizontal {
   display: grid;
   grid-template-columns: 1fr .7fr;
}*/

/* ==========================================================================
   Header
   ========================================================================== */

main header {
   padding: 0 4.25rem;
   background: #fff;
   text-align: center;
   & .wrapper { 
      padding-top: 3.84rem;
      padding-bottom: 1.8125rem; 
   }
   & h1 {
      font-size: 2.9375rem;
      font-weight: 400;
      color: #888;
      line-height: 1.2;
      & b { 
         display:block; 
         font-size: 3.15625rem;
         line-height: .9;
         color: #5380af;
         margin-top: .625rem;
      }
   }
   & :is(h1,h2,h3) { text-align:center; }
   & h2 {
      font-size: 1.625rem;
      font-weight: 300;
      line-height: 1;
      font-style: italic;
      color: #777;
      margin-top: 1.1875rem;
      margin-bottom: 2.13rem;
   }
   & a {
      font-weight: 400;
      color: #dd1100;
      margin-inline: auto;
   }
   & .links {
      display: flex;
      gap: 1.75rem;
      flex-wrap: wrap;
      margin-top: 3.4375rem;
   }
   & .links a {
      padding: 15px 24px 13px;
      border-radius: 5px;
      background-color: #19243c99;
      font-size: 1rem;
      color: #ffc740;
      &:hover { color: var(--tertiary-color) }
   }
}


/* ==========================================================================
   Products pod
   ========================================================================== */
#products {
   & .wrapper { padding-top:0.825rem }
   & .wrapper > p {
      font-size: 1.16rem;
      line-height: 1.6;
      font-weight: 400;
      padding-inline: 2.9rem;
      & a {
         font-weight: 400;
         color: #dd1100;
      }
   }
   & .wrapper > h2 {
      font-size: 1.900625rem;
      color: #5380af;
      font-weight: 600;
      margin-bottom: .875rem;
   }
   & .media-list { margin-top:4rem; }

   & .inline-link-list  {
      display: inline-flex;
      flex-wrap: wrap;
      gap: .1rem .5rem;
      & > li { 
         font-style: italic;
         list-style-type: square;
         padding-left: 0;
         font-size: 1rem;
      }
      & > :is(li:first-of-type,li:nth-of-type(2)) {
         list-style-type: none;
      }
      & > li a { font-weight:400; }
   }
   & .works-with, & .works-with a {
      font-size: 1.05rem;
      font-style: italic;
      line-height: 1.5;
      margin-top: 1rem;
      margin-bottom: 0;
      font-weight: 400;
   }
   & .works-with a::after {
      color: #808080;
      content: '\25AA';
      padding-left: 0.375rem;
      padding-right: 0.125rem;
   }
}

/* ==========================================================================
   CAG Apart section
   ========================================================================== */

section.cag-apart {
   & h2 + h3 { 
      color: #6a6a6a; 
      text-align: center;
      font-size: 1.34375rem;
      margin-bottom:2rem;
   }
   & .media-card-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 1.75rem 1rem;
      @media (max-width: 600px) {
         grid-template-columns: 1fr;
      }
   }
   & .media__icon-text {
      grid-template-columns: 45px 1fr;
      grid-template-rows: repeat(3,auto);
      grid-column-gap: 1rem;
      padding:.3rem; 
      & img { grid-column:1; grid-row: 1 / -1; }
      & h3, & p { 
         grid-column:2; 
         align-content: flex-start; 
      }
      & h3 { margin-bottom:.5rem }
      & p { color:#535353; }
      &:last-of-type {
         grid-column: 1 / -1;
         background: #ebf1fc;
         margin-top: 1rem;
         margin-bottom: 1.125rem;
         padding: 2rem;
         margin-inline: calc(1rem + 45px);
         @media (max-width: 600px) {
            margin-inline: 0;
         }
         & p { margin-bottom:0 }
      }
   }
}

/* ==========================================================================
   Gallery Section
   ========================================================================== */

section.gallery-wrapper {
   & .wrapper > h2 { 
      margin-block: .5rem;
      & + p { 
         text-align:center; 
         margin-bottom: 2rem;
      } 
   }
}

.cag-gallery {
   display: grid;
   grid-template-columns: repeat(4,1fr);
   align-content: flex-start;
   gap: .7rem;
   padding: .7rem;
   word-break: break-word;
   margin-bottom: 2.25rem;
   height: auto;
   transition: all 1s ease;
   @media (max-width: 600px) {
      grid-template-columns: repeat(2,1fr);
   }
}

.cag-gallery {
   &:not(.loaded) + .gallery-controls { display:none; }
   & + .gallery-controls {
      display: flex;
      justify-content: center;
      & .btn.action-open { display:block }
      & .btn.action-close { display: none; }
   }  
   &.open + .gallery-controls {
      & .btn.action-open { display:none }
      & .btn.action-close { display: block; }
   }
}

/* Content (input / output) from JSON */
.cag-gallery {
   & .answer-wrapper { display:grid; }
   & .answer-wrapper > :where(div,ul) {
      padding: 1rem;
      border: 2px solid #d3d3d3;
      margin-block: .5rem;
      color: #000;
   }
   & > div {
      color: #033864;
      font-size: .95rem;
      font-weight: 600;
      line-height: 1.4;
      display: grid;
      z-index: 1;
      align-items: center;            
      position: relative;      
      & > div { padding:1.25rem; }
      & > div:first-of-type {  
         display: flex;
         height: 100%;      
         align-items: center;  
         cursor: pointer;  
         color: #fff;
         background-color:#508fcf;
         border: 1px solid #508fcf;
         word-break: keep-all;
         &:hover {
            color: #fff;
            background-color: #73a9df;
            border: 1px solid #73a9df; 
         }    
      }
      & > div:last-of-type {
         box-shadow: rgba(72, 72, 72, 0.32) 0 21px 22px 0;
         padding-top: .85rem;
         background: #fff;
         color: #777;
      }
   }
   &:not(.open) > div:nth-of-type(n + 33) {
      display: none;
   }
   & .pre {
      padding-top:150px;
      background: linear-gradient(90deg, var(--primary-color) 25%, #f6f6f7 50%, var(--primary-color) 75%);
      background-size: 200% 100%;
      animation: shimmer 1.2s linear infinite;
   }
   & ul { margin-block: 1rem; }
   & div {
      & img { max-width:min(80%,300px); }
      & button {
         width: 20px;
         height: 20px;
         font-size: 1.2rem;
      } 
   } 
   & :is(code, kbd, pre, samp, tt) {
      font-family: "Source Sans Pro",Consolas, Monaco, monospace;
      font-size: .75rem;
      font-weight:600;
      color:#333;
   }
}

.cag-gallery {
   /* outputs */
   & .input {
      border: 2px solid #a4c4e8;
      background: #f3f7fd;
   }
   & .input::before {
      display: block;
      content: "USER INPUT";
      margin-bottom:.5rem;
      color: #444;
      font-size: .85rem;
      font-weight:400;
   }
   & .WolframLanguageEvaluatorToolCall {
      margin: 0;
      background: #ffecb1;
      border: 2px solid #ffc658;
      & img { 
         width: 100%;
         max-width:100%; 
      }
   }
   & .WolframAlpha {
     margin: 0;
     border: 2px solid #ffc658;
     margin-block: .5rem;
   }
   /* markdown */
   & .Markdown {
      font-weight: 500;
      color:#333;
   }
   & .Markdown .tex {
      font-size: .8rem;
   }
   & .Markdown > div {
      > * { margin-top:.5rem; }
      & h1 { 
         font-size: 1.5rem;
         color:#d53e39;
         line-height: 1;
      }
      & h2 {
         font-size: 1.3rem;
         color: #f86300;
         line-height: 1;
      }
      & pre {
         background: #f6f6f6;
         padding: 1rem;
         font-size: 0.7rem;
         font-weight: 400;
         margin-top: .5rem;
      }
      & ul, & ol { list-style: circle; }
      & li { 
         list-style: disc;
         margin-top: .5rem;
         list-style-position: inside;
      }
   }
   & .Markdown::before {
      display: block;
      content: "LLM OUTPUT";
      margin-bottom: .5rem;
      color: #898989;
      font-size: .85rem;
      font-weight: 400;
   }
   /* tables */
   & div:popover-open .Markdown img { max-width:60% }
   & .Markdown :is(table,td,th) {
      border: 1px solid #ccc;
   }
   & .Markdown table {
      width: 100%;
      & thead {
         background: #ececec;
         border: 1px solid #ccc;
      }
      & td {
         padding: .2rem .6rem;
      }
   }
   /* Output Labels */
   & .has-label::before {
      display: block;
      content: attr(data-label,"OUTPUT");
      margin-bottom:.5rem;
      color: #444;
      font-size: .85rem;
      font-weight:400;
      text-transform: uppercase;
   }
   /* torn effect */
   & .torn {
      max-height:170px;
      min-height: 100px;
      overflow: hidden;
      margin-bottom: .1rem;
      position:relative;      
   }
   & .torn:open::after,
   & div.torn::after {
      display:block;
      background: bottom url('../img/codeTear-lightyellow.png') repeat-x;
      background-size:contain;
      height:50px;
      content:'';
      bottom:0;
      z-index:2;
      position:absolute;
      width: 100%;
   }
   & :is(.Documentation,.WolframAlpha) {
      margin-block: .5rem;
      margin-inline: 0;
      border: 2px solid #ffc658;
   }
   & :is(.WolframLanguageEvaluatorToolCall,.Documentation,.WolframAlpha) {
      background: #fff3c9;
      width: 90%;
      left: 10%;
      position: relative;
   }
   /* Multiple outputs */
   & .WolframLanguageEvaluatorToolCall:has(+ .WolframLanguageEvaluatorToolCall),
   & .Documentation:has(+ .Documentation),
   & .WolframAlpha:has(+ .WolframAlpha) {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
   }
   & .WolframLanguageEvaluatorToolCall + .WolframLanguageEvaluatorToolCall, 
   & .Documentation + .Documentation,
   & .WolframAlpha + .WolframAlpha {
      border-top: none;
      margin-top: 0;
   }
   /* lists */
   & li {
      & > p { display: inline; }
      & > ul { padding-left: 1rem; }
   }
}

/* Tabs on the gallery */
.cag-gallery .tabs {
   display: grid;
   grid-template-columns: repeat(2, minmax(200px, 1fr));
   grid-template-rows: auto 1fr;
   padding-top: 1rem;
   & details {
      display: grid;
      grid-template-columns: subgrid;
      grid-template-rows: subgrid;
      grid-column: 1 / -1;
      grid-row: 1 / span 3;
   }
   & details > div {
      margin-top: -20px;
      overflow:hidden;
   }
   & details::details-content {
     grid-row: 2; 
     grid-column: 1 / -1; 
     padding: 1rem;
   }
   & details:not([open])::details-content {
     display: none;
   }
   & summary {
      grid-row: 1;
      font-size: .7rem;
      display: grid;
      padding: .19rem 1rem .2rem;
      cursor: pointer; 
      z-index: 1;
      border-radius: 1rem;
      font-weight: 400;
      background:#fff;
      border: 1px solid #fdba5a;
      text-transform: uppercase;
   }
   & details[open] summary {
     background: #fdba5a;
   }
   & details:nth-of-type(1) {
      & summary {
         grid-column: 1 / span 1; 
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
         text-align: right;
         justify-self: flex-end;
      }
      & > div { max-height:130px }
   }
   & details:nth-of-type(2) {
      &.torn {
         max-height: 400px;*/
      }
      & summary {
         grid-column: 2 / span 1;
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
         text-align: left;
         padding-right: 1rem;
         justify-self: flex-start;
      }
      & > div { 
         max-height:300px;
         margin-top: 0;
         overflow: hidden;
      }
   }
   & details > div .ContentMarkdown {
      border: 2px solid #dfdfdf;
      background: #f3f3f3;
      margin: 0px 15px;
      font-family: Consolas, Monaco, monospace;
      font-size: 0.79rem;
      font-weight: 400;
      color: #1d1d1d;
      line-height: 1;
      overflow: unset;
      overflow-y: hidden;
      overflow-x: hidden;
      padding: 1rem;
      white-space: normal;
      word-wrap: break-word;
      & > * { 
         font-size: 0.65rem !important;
         line-height:1rem;
         padding:.15rem 0;
      }
   }
}

/* 
   Popover
   ============= */
[popover] {
   max-width: 700px; 
   width: auto; 
   height: 80vh;
   display: none;
}

html.popover-open {
  overflow: hidden; 
  height: 100vh;
}
.cag-gallery div {
   &:popover-open {
      display: block;
      top: 50%;
      left: 50%;
      margin: 0;
      transform: translate(-50%,-50%);
      & img { max-width:100%; }
      @media (max-width: 600px) {
         width: 90lvw;
         height: 90lvh;
      }

   }
   &::backdrop {
      background:#2d2e2f;
      opacity: .7;
      backdrop-filter: blur(3px);
   }
   & button {
      position: sticky;
      width: 25px;
      height: 25px;
      color: #fff;
      font-size: 1.4rem;
      background: #a8a8a8;
      overflow: visible;
      box-shadow: 0 0 5px #33333369;
      right: -12px;
      left: 100%;
      border: 0;
      border-radius: 50%;
      top: 0;
      padding: 7px 4.5px;
      line-height: 0.5;
      font-family: monospace;
      z-index: 999;
      margin: 0;
      touch-action: manipulation;
      &:hover {
         background: #7b7b7b;
      }
   }
}

@keyframes shimmer {
   0% { background-position:200% 0;}
   100% { background-position: -200% 0; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
main section.faq {
   & .wrapper { 
      padding-inline: 2.5rem;
      padding-bottom: 1.875rem; 
   }
   & h2 { 
      margin-bottom: 2.6225rem; 
   }
   & h3 { 
      font-size: 1.5rem;
      font-weight: 600;
      color: #0d65a3;
      margin-bottom: 1rem; 
   }
   & h4 {
      font-size: 1.25rem;
      font-weight: 600;
      line-height: 1.33;
      margin-bottom: .375rem;
      color: #222;
   }
   & p {
      margin-bottom: 1.7rem;
   }
   & div + h3 {
      padding-top: 1.2rem;
   }
   & a.icon-download {
      display: inline-flex;
      margin-top: 2.6875rem;
      &:before {
         display: inline-block;
         content:"";
         background: url(../img/download.svg) no-repeat;
         width: 19px;
         height: 17px;
         background-size: 19px 17px;
         margin-right: .675rem;
      }
   }
}

/* ==========================================================================
   Pods
   ========================================================================== */

section.pods-container .wrapper {
   padding-inline: 2.5rem;
   padding-bottom: 4.375rem; 
}

.pods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  
  @media (max-width: 900px) {
   grid-template-columns: 1fr;
  }

  & :is(h3,p,a) { color: #fff;  }
  & h3 { font-size: 1.475rem; }
  & p { opacity:.75; }
  
  & > :is(a,div) {
    display: grid;
    grid-template-columns: 70px 1fr;
    align-items:flex-start;
    padding: 2.8125rem;
    gap:1rem;
    background: linear-gradient(to top, #296c99, #3481b6);
    & > div:last-of-type {
       display: flex;
       flex-flow: column;
       justify-content: flex-start;
       gap: 1rem;
     }
  }
  
   & .btn {
      align-self: flex-start;
      background: transparent;
      display: table;
      border-width: 2px;
      border-radius: 7px;
   }

   & a:hover .btn,
   & .btn:hover {
      background-color: #145586;
      color: #fff;
      border-color: #fff;
   }
}

/* ==========================================================================
   Contact banner
   ========================================================================== */
.cag-stripe {
   color: #fff;
   padding: 14px 40px;
   text-decoration: none;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: var(--tertiary-color);
   position: sticky;
   visibility: hidden;
   display: none;
   bottom: -1px;
   z-index: 9;
   transform: translateY(100px);
   transition: all .3s ease;
   &:hover {
      background: #f88900;
      color: #fff;
   }
   @media (max-width: 600px) {
      flex-wrap: wrap;
      gap: 1rem;
      text-align: center;
      & h2 { width:100%; }
   }
   & h2 { 
      font-size: 1rem;
      font-weight: 600;
      color: #fff;
      margin-right: 1rem;
   }
   &.active { display:flex; }
   &.active.sticky {
      transform: translateY(0);
      visibility: visible;
   }
   & .btn {
      border-radius: .3rem;
      font-size: 0.95rem;
      padding: 0.625rem 0.75rem;
      margin-left: 15px;
   }
   & .btn.btn-outline {
      background: transparent;
      border-color: #fff;
      color: #fff;      
   }
}

/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */

/* styles for large screens (1200px)
   ========================================================================== */

@media all and (max-width: 1200px) {

   /* Header */
   main header {
      & .wrapper {
         padding-inline: 0;
         padding-bottom: 2.625rem;
      }
      & h1 {
         font-size: 2.71875rem;
         & b { font-size: 2.9375rem }
      }
      & h2 {
         font-size: 1.5rem;
      }
   }
   
   /* Products */
   #products .wrapper {
      padding-top: 2.875rem;
      padding-inline: 2.8rem;
      & > h2 { 
         font-size: 1.78125rem; 
         margin-top: 0;
      }
   } 

   /* Media List */
   .media-list > div {
      padding-bottom: 2.8rem;
      grid-template-columns: 1fr min(80%,300px);
   }
   .media-list .links-list a {
      line-height: 1.18;
      padding-bottom: 1.8rem;
      font-size: 1.1rem;
   }
   .media-list > div > div:first-child h2 { font-size:2.15rem; }
   
}

/* styles for medium screens (900px)
   ========================================================================== */

@media all and (max-width: 900px) {

   /* Header 900px */
   main header {
      padding-inline: 2.8rem;
      & .wrapper {
         padding-bottom: 2.625rem;
         padding-inline: 0;
      }
      & h1 {
         font-size: 2.34375rem;
         & b { font-size: 2.55rem }
      }
      & h2 {
         font-size: 1.5rem;
         max-width: 340px;
         margin-inline: auto;
         line-height: 1.2;
      }
      & a { font-size:1.14rem }
   }
   
   /* Products 900px */
   #products .wrapper {
      padding-top: 2.375rem;
      /*padding-inline: 2.8rem;*/
      & > h2 { 
         max-width: 450px;
         margin-inline: auto;
         font-size: 1.5625rem; 
      }
      & p { padding-inline:0; }
   } 
   
   /* media list */
   .media-list {
      & h2 {
         font-size: 2.6rem;
      }
      & :is(h2,h3) { 
         text-align:center; 
      }
      & > div > div:first-child h3 { 
         font-size: 1.6rem;
         margin-block: 1.25rem;
         line-height: 1.35;
      }
      & .icon h2.titleAndIcon {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
         margin-bottom:.875rem; 
         gap: 0 .5rem;
         & > * { order:2; }
         & > span:nth-child(2) { 
            order:1;
            flex-basis: 100%;
         }

      }
      & > div {          
         padding-inline:2.2rem;
         & > div:first-of-type { padding-inline:1.2rem; } 
      }
      & > div .btn { display: table; }
      & > div > div:nth-of-type(3) { margin-top:2.25rem; }
      & .icon:not(.media__horizontal)::before {
         position: relative;
         top:0;
         right:0;
         margin:0 auto;
      }
      & img { 
         margin-inline: auto;
         max-width: 400px;
      }
      & .media__horizontal :is(h2,h3) {
         text-align: left;
      }
   }
   .media-list > div,
   .media__icon-text,
   .media-list .media__horizontal,
   .media__text { 
      grid-template-columns: 1fr; 
      max-width: 650px;
      margin-inline: auto;
   }

   section.cag-apart .wrapper {  padding-inline: 1.5rem; }
   section.cag-apart .media__icon-text:last-of-type {
      max-width: 100%;
   }

   .media__text { padding-left:0 }
   .media__icon-text h3 { text-align:left; }
   .media__icon-text img { 
      width: 40px; 
      margin-bottom: 1rem;
   }

   .media__icon-text:last-of-type img { width:50px; }

   section#faq .wrapper,
   section.pods-container .wrapper { 
      padding-inline:3rem;
   }
   section.pods-container .wrapper {
      max-width: 800px;
   }
}

/* styles for small screens (600px)
   ========================================================================== */

@media all and (max-width: 600px) {

   /* general 600px */
   main .wrapper { 
      padding-top: 2.1rem; 
      padding-inline: 1rem;
   }
   main section .wrapper h2 { font-size: 1.88rem; }

   /* Header 600px */
   main header {
      padding-inline:2.5rem;
      & h1 {
         font-size: 1.90624rem;
         & b { 
            font-size: 2.46875rem; 
            margin-top: .525rem;
            line-height: 1;
         }
      }
      & h2 { 
         line-height: 1.4;
         font-size:1.4rem; 
      }
   }
   
   /* Products 600px */
   #products .wrapper {
      & > h2 {  font-size: 1.6rem;  }
      & p { 
         font-size: 1.2rem;
         line-height: 1.4;
      }
   } 
      
   /* media list 600px */
   .media-list, 
   .media-list .media__horizontal { 
      grid-template-columns:1fr;
      & h2 { text-align:center; }
      & h3 { text-align: left; }
   }
   .media__text { text-align:left; }
   .media-list {
      gap:2rem; 
      & > div {
         padding-top: 1.2rem;
         padding-inline: 1.2rem;
      }
      & > div > div:first-of-type { 
         padding-inline:0; 
         & h3 { letter-spacing: -.02rem; }
      } 
      & > div > div:first-child h2 { 
         font-size: 2.3rem;
      }
      & > div > div:nth-of-type(2) {
         margin-top: 0;
      }
      & .icon::before {
         position: relative;
         top:0;
         right:0;
         margin:0 auto;
      }
   }

   .media__icon-text {
      & h3 { font-size:1.5rem; }
      & img { 
         width: 34px;
         margin-bottom: .4rem; 
      }
   }

   section.cag-apart {
      & .wrapper { 
         margin-bottom:2.1rem; 
      }
   }

   section.cag-apart .media__icon-text {
      grid-template-columns: 35px 1fr;
      padding: 0;
      & h3 { 
         align-content: center;
         text-align: left;
      }  
      & p { 
         margin-bottom: 2.1rem;
         font-size: 1.1rem;
      }
      &:last-of-type {
         grid-template-columns: 1fr;
         margin-bottom: 0;
         padding-top: 1rem;
         & > * {
            grid-column: 1;
         }
         & > img { 
            grid-row:1;
            margin-inline:auto; 
            s}
         & h3 { grid-row: 2; }
         & p { grid-row: 3; }
      }
   }

   main section.faq {
      & h3 {
         font-size: 1.5rem;
      }
      & h4 {
         font-size: 1.3rem;
         line-height: 1.3;
         font-weight: 400;
      }
      & .faq__content { cursor:pointer; }
      & .faq__content > div:not(.open) {
         position: relative;
         &::after {
            content: "";
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 34px;
            background: linear-gradient(to top,#fbfbfb 0%,#ffffffe3 15%,#ffffff52 90%);
            pointer-events: all;
         }
         & p {
            max-height: 60px;
            overflow: hidden;  
         }
      }
      & p {
         color: #636363;
         line-height: 1.25;
         margin-bottom: 1.9rem;     
      }
   }

   .pods-container .pods {
      & a { 
         grid-template-columns: 50px 1fr;
         padding: 1.8rem; 
      }
   }

   .cag-stripe {
      display: block;
      & h2 { 
         display:inline;
         margin-right:0 
      }
      & a.btn {
         padding: 0;
         border: 0;
         display: inline;
         &:hover {
            background: unset;
            color: #df2415;
         }
      }
   }
}

/* styles for minimum supported screen width (320px)
   ========================================================================== */

@media all and (max-width: 320px) {}

/* printer styles
   ========================================================================== */

@media print {}