@media (min-width: 360px) {  
  .wrapper {
    --gutter: clamp(var(--gutter-min), var(--gutter-fluid), var(--gutter-max));
    width: min(var(--wrapper-max), calc(100vw - var(--gutter)));
    background-color: #ffffff;
    display: grid;
    grid-template-areas:
      "banner banner banner"
      "questions questions questions"
      "redarrow_top redarrow_top redarrow_top"
      "discover discover discover"
      "logos logos logos"
      "youcan youcan youcan"
      "attract attract attract"
      "increase increase increase"
      "redarrow_bottom redarrow_bottom redarrow_bottom"
      "videolink videolink videolink";
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows:
      auto  /* banner */
      auto  /* questions */
      auto  /* red arrow_top */
      auto  /* discover */
      auto  /* logos */
      auto  /* youcan */
      auto  /* attract */
      auto  /* increase */
      auto  /* red arrow_bottom */
      auto; /* arrows + video link */
    align-items: start;
    gap: 10px;
  }
  .grid-banner           { grid-area: banner; }
  .grid-questions        { grid-area: questions; }
  .grid-redarrow_top     { grid-area: redarrow_top; }
  .grid-discover         { grid-area: discover; }
  .grid-logos            { grid-area: logos; }
  .grid-youcan           { grid-area: youcan; }
  .grid-attract          { grid-area: attract; }
  .grid-increase         { grid-area: increase; }
  .grid-redarrow_bottom  { grid-area: redarrow_bottom; }
  .grid-rarrow           { grid-area: rarrow; }
  .grid-cta              { grid-area: videolink; }
  .grid-larrow           { grid-area: larrow; }

  .banner h1 { font-size: clamp(3rem, 9vw, 3.5rem); }
  .discover-tag { font-size: min(5.3vw, .63em); }

  .logos{
    display:flex;
    flex-direction: row;
    justify-content:center;
    align-items:center;
    gap:3rem;
  }
  .costco,
  .netflix,
  .youcan,
  .attract { align-self: center; }
  .increase { align-self: center; margin-top: 10px; }
  .youcan { margin-top:-10px; }
}

@media (min-width: 768px) {
  .wrapper {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "banner banner banner"
      "questions questions questions"
      "redarrow_top redarrow_top redarrow_top"
      "discover discover discover"
      "logos logos logos"
      "attract youcan increase"
      "redarrow_bottom redarrow_bottom redarrow_bottom"
      "videolink videolink videolink";
  }
  .mobile-break { display: inline; }
  .card-break { display: block; }
  .tagbreak { display: inline; }
  .logos { gap: 10rem; }
  .attract,
  .increase {
    width:75%;
    margin: auto;
  }
  .attract p {
    width: 100%;
    transform: rotate(-15deg);
  }
  .increase p {
    width: 100%;
    transform: rotate(15deg);
  }
}

@media (min-width: 1180px) {
  .wrapper {
    grid-template-areas:
      "banner banner banner"
      "questions questions questions"
      "redarrow_top redarrow_top redarrow_top"
      "costco discover netflix"
      "attract youcan increase"
      "cta cta cta"
      "videolink videolink videolink";
    grid-template-columns: 1fr 2fr 1fr;
  }

  .grid-cta      { grid-area: cta; }

  .grid-logos    { display: contents; }
  .grid-costco   { grid-area: costco; }
  .grid-netflix  { grid-area: netflix; }
  .grid-attract,
  .grid-increase {
    justify-self: center;
    width: fit-content; 
  }
  .attract,
  .increase{
    width: auto;
  }
  .attract p,
  .increase p{
    display: inline-block;
    width: auto;
    margin: 0 auto;
    transform-origin: 50% 50%;
  }
  .attract p  { transform: translateX(60px) rotate(-15deg); }
  .increase p { transform: translateX(-60px) rotate(15deg); }
}