/* Mobile First Breakpoints */
@media (min-width: 320px ) { /* Mobile Small       */ }
@media (min-width: 480px ) { /* Mobile Large       */ }
@media (min-width: 768px ) { /* Tablet             */ }
@media (min-width: 1024px) { /* Desktop            */ }
@media (min-width: 1200px) { /* Large Desktop      */ }
@media (min-width: 1440px) { /* Extra Large        */ }

/* Desktop First Breakpoints */
@media (max-width: 1439px) { /* Below XL           */ }
@media (max-width: 1199px) { /* Below Large        */ }
@media (max-width: 1023px) { /* Below Desktop      */ }
@media (max-width: 767px ) { /* Below Tablet       */ }
@media (max-width: 479px ) { /* Below Mobile Large */ }




/* STANDARD DEVICE CATEGORIES                */
/* Mobile Devices                            */
/* Small Mobile (320px - 479px)              */
@media (min-width: 320px) and (max-width: 479px)
{
  .container { max-width:             100%;            padding:     0 16px; }
  .text      { font-size:             14px;            line-height: 1.4;    }
  .button    { padding:               12px 16px;       width:       100%;   }
  .grid      { grid-template-columns: 1fr;             gap:         16px;   }
}

/* Large Mobile (480px - 767px)              */
@media (min-width: 480px) and (max-width: 767px)
{
  .container { max-width:             100%;            padding:     0 20px; }
  .text      { font-size:             15px;            line-height: 1.5;    }
  .button    { padding:               12px 20px;       width:       auto;   }
  .grid      { grid-template-columns: repeat(2, 1fr);  gap:         20px;   }
}

/* Tablet Devices                            */
/* Small Tablet (768px - 1023px)             */
@media (min-width: 768px) and (max-width: 1023px)
{
  .container { max-width:             100%;            padding:     0 32px; }
  .text      { font-size:             16px;            line-height: 1.6;    }
  .grid      { grid-template-columns: repeat(3, 1fr);  gap:         24px;   }
}

/* Desktop Devices                           */
/* Small Desktop (1024px - 1199px)           */
@media (min-width: 1024px) and (max-width: 1199px)
{
  .container { max-width:             980px;          margin:       0 auto; }
  .grid      { grid-template-columns: repeat(4, 1fr); gap:          32px;   }
}

/* Large Desktop (1200px - 1439px)           */
@media (min-width: 1200px) and (max-width: 1439px)
{
  .container { max-width:             1140px;         margin:       0 auto; }
  .grid      { grid-template-columns: repeat(4, 1fr); gap:          40px;   }
}

/* Extra Large Desktop (1440px+)             */
@media (min-width: 1440px)
{
  .container { max-width:             1320px;         margin:       0 auto; }
  .grid      { grid-template-columns: repeat(6, 1fr); gap:          48px;   }
}

/* SPECIFIC DEVICE TARGETS                   */
/* iPhone 14 Plus/13 Pro Max (428px x 926px) */
@media only screen 
  and (device-width:  428px) 
  and (device-height: 926px) 
  and (-webkit-device-pixel-ratio: 3)
{
  .container { padding:               0 24px;                               }
}

/* iPad (768px x 1024px)                     */
@media only screen 
  and (device-width:  768px) 
  and (device-height: 1024px) 
  and (-webkit-device-pixel-ratio: 2)
{
  .grid      { grid-template-columns: repeat(2, 1fr);                       }
}

/* iPad Pro 12.9" (1024px x 1366px)          */
@media only screen 
  and (device-width:  1024px) 
  and (device-height: 1366px) 
  and (-webkit-device-pixel-ratio: 2)
{
  .container { max-width:             900px;                                }
  .grid      { grid-template-columns: repeat(3, 1fr);                       }
}