@media screen and (min-width: 1280px) {
   /*
   .nav-header-primary .btn-search {
      width: calc( (100vw - (var(--xy-gutter) * 2)) / 12 * 2 );
   }
   .nav-header-primary .btn-search a {
      margin-left: auto;
   }
   .nav-header-primary .menu li:first-child {
      margin-left: auto;
   }
   nav.primary-nav .menu {
      gap: 4rem;
   }
   */
}

/* LG - 1280px */
@media screen and (max-width: 1280px) {
    .xy-indicator { background-color: orange; }
    /** { color: orange; }*/

    :root {
        --xy-gutter : 2rem;
    }
    /** 
     * BLOCKS!
     */

     /* Profiles & Articles */
     .profile-grid, .article-grid {
        grid-template-columns: repeat(3, 1fr);
     }

     /**
      * THE HEADER NAV DEATH 
      */
     .menu .sub-wrapper {
        padding-top: 4rem;
     }
     .menu .sub-wrapper .menu-section-title{
        grid-column: 1 / 4;
     }
     .menu .sub-wrapper .sub-menu {
        grid-column: 4 / 12;
     }

     /* Article Grid */
     .card.post.featured {
      grid-column: 1 / 4;
     }
}

/* MD */
@media screen and (max-width: 1024px) {
    .xy-indicator { background-color: blueviolet; }
    /** { color: blueviolet; }*/

    :root {
        --xy-gutter : 1.5rem;

        /* Bringing all these type scales down a level - means 3xl and 4xl are the same */
        --text-7xl : calc(1rem * var(--text-scale) * var(--text-scale) * var(--text-scale) * var(--text-scale) * var(--text-scale) * var(--text-scale) * var(--text-scale) );
        --text-6xl : calc(1rem * var(--text-scale) * var(--text-scale) * var(--text-scale) * var(--text-scale) * var(--text-scale) * var(--text-scale) );
        --text-5xl : calc(1rem * var(--text-scale) * var(--text-scale) * var(--text-scale) * var(--text-scale) * var(--text-scale)  );
        --text-4xl : calc(1rem * var(--text-scale) * var(--text-scale) * var(--text-scale) * var(--text-scale) );
    }

    /** 
     * BLOCKS!
     */ 

     /* Profiles & Articles */
     .profile-grid, .article-grid {
        grid-template-columns: repeat(2, 1fr);
     }

     .card.post.featured {
        grid-column: span 2;
     }

     .posts-pagination.within-grid {
         grid-column: span 2;
     }

     /* Card trickery */
     .cards.vertical .card-wrapper, 
     .card-wrapper.vertical {
        gap: var(--xy-gutter);
     }
     .cards.horizontal {
        overflow: hidden;
        max-width: 100vw;
     }
     .cards.horizontal > div[data-xy] {
        display: block;
     }
     .cards.horizontal .card-wrapper {
        width: calc( 100vw  );
        translate: calc(var(--xy-gutter) * -1) 0;
        gap: var(--xy-gutter);
        overflow-x: scroll;
        padding-bottom: 1rem;
        grid-template-columns: repeat(var(--card-total), 1fr);
     }
     .cards.horizontal .card-wrapper .card:first-child {
        margin-left: var(--xy-gutter);
     }
     .cards.horizontal .card-wrapper .card:last-child {
        margin-right: var(--xy-gutter);
     }
     .cards.horizontal .card-wrapper .card {
        width: 45vw;
     }


     /**
      * FOOTER
      */

      .site-footer .menu {
        gap: 1rem;
        margin-left: 1rem;
      }

      /**
      * THE HEADER NAV DEATH 
      */
     .menu .sub-wrapper .sub-menu {
        grid-column: 4 / 13;
     }
     nav.primary-nav .menu {
        gap: 1rem;
     }
     .nav-header-primary .menu > .menu-item > svg {
        width: var(--text-sm);
     }

     /* Slider Header Boi */
     .header-slider-wrapper .slide-inner,
     .header-slider-wrapper .slide-inner img {
         aspect-ratio: 3 / 2;
     }
     .header-slider-wrapper .slide {
         width: calc(100% - var(--xy-gutter) * 4);
     }
     .site-header.layout-slider .inner {
         padding-top: 4rem;
     }
     .header-slider-wrapper .flickity-prev-next-button.previous {
         right: calc(var(--xy-gutter)*5.5);
     }
     .site-header.layout-slider .inner-title {
         display: none;
     }
     .header-slider-wrapper .flickity-prev-next-button {
         display: none;
     }
     .header-slider-wrapper .flickity-page-dots {
         left: calc(var(--xy-gutter) *2);
         width: calc(100% - var(--xy-gutter) * 4);
         display: flex;
         flex-wrap: nowrap;
         justify-content: center;
     }
     .header-slider-wrapper .flickity-page-dots .dot {
      width: 100%;
     }
}