/* =========================
   BREAKPOINT
========================= */

:root{
   --sm:640px;
   --md:768px;
   --lg:1024px;
   --xl:1280px;
   }
   
   /* =========================
      CONTAINER
   ========================= */
   
   .container{
   width:100%;
   margin-left:auto;
   margin-right:auto;
   padding-left:20px;
   padding-right:20px;
   }
   
   @media (min-width:768px){
   .container{max-width:720px}
   }
   
   @media (min-width:1024px){
   .container{max-width:960px}
   }
   
   @media (min-width:1280px){
   .container{max-width:1200px}
   }
   
   /* =========================
      DISPLAY
   ========================= */
   
   .flex{display:flex}
   .inline-flex{display:inline-flex}
   .block{display:block}
   .inline-block{display:inline-block}
   .grid{display:grid}
   .hidden{display:none}
   
   /* =========================
      FLEX
   ========================= */
   
   .flex-row{flex-direction:row}
   .flex-col{flex-direction:column}
   
   .flex-wrap{flex-wrap:wrap}
   .flex-nowrap{flex-wrap:nowrap}
   
   /* =========================
      ALIGN
   ========================= */
   
   .items-start{align-items:flex-start}
   .items-center{align-items:center}
   .items-end{align-items:flex-end}
   
   /* =========================
      JUSTIFY
   ========================= */
   
   .justify-start{justify-content:flex-start}
   .justify-center{justify-content:center}
   .justify-end{justify-content:flex-end}
   .justify-between{justify-content:space-between}
   .justify-around{justify-content:space-around}
   
   /* =========================
      GAP
   ========================= */
   
   .gap-5{gap:5px}
   .gap-10{gap:10px}
   .gap-15{gap:15px}
   .gap-20{gap:20px}
   .gap-25{gap:25px}
   .gap-30{gap:30px}
   .gap-35{gap:35px}
   .gap-40{gap:40px}
   .gap-45{gap:45px}
   .gap-50{gap:50px}
   
   /* =========================
      GRID
   ========================= */
   
   .grid-cols-1{grid-template-columns:repeat(1,1fr)}
   .grid-cols-2{grid-template-columns:repeat(2,1fr)}
   .grid-cols-3{grid-template-columns:repeat(3,1fr)}
   .grid-cols-4{grid-template-columns:repeat(4,1fr)}
   
   /* =========================
      TEXT
   ========================= */
   
   .text-left{text-align:left}
   .text-center{text-align:center}
   .text-right{text-align:right}
   
   /* =========================
      WIDTH
   ========================= */
   
   .w-full{width:100%}
   .w-auto{width:auto}
   
   /* =========================
      MARGIN
   ========================= */
   
   .m-5{margin:5px}
   .m-10{margin:10px}
   .m-15{margin:15px}
   .m-20{margin:20px}
   .m-25{margin:25px}
   .m-30{margin:30px}
   .m-35{margin:35px}
   .m-40{margin:40px}
   .m-45{margin:45px}
   .m-50{margin:50px}
   
   /* top */
   
   .mt-5{margin-top:5px}
   .mt-10{margin-top:10px}
   .mt-15{margin-top:15px}
   .mt-20{margin-top:20px}
   .mt-25{margin-top:25px}
   .mt-30{margin-top:30px}
   .mt-35{margin-top:35px}
   .mt-40{margin-top:40px}
   .mt-45{margin-top:45px}
   .mt-50{margin-top:50px}
   
   /* bottom */
   
   .mb-5{margin-bottom:5px}
   .mb-10{margin-bottom:10px}
   .mb-15{margin-bottom:15px}
   .mb-20{margin-bottom:20px}
   .mb-25{margin-bottom:25px}
   .mb-30{margin-bottom:30px}
   .mb-35{margin-bottom:35px}
   .mb-40{margin-bottom:40px}
   .mb-45{margin-bottom:45px}
   .mb-50{margin-bottom:50px}
   
   /* x */
   
   .mx-5{margin-left:5px;margin-right:5px}
   .mx-10{margin-left:10px;margin-right:10px}
   .mx-15{margin-left:15px;margin-right:15px}
   .mx-20{margin-left:20px;margin-right:20px}
   .mx-25{margin-left:25px;margin-right:25px}
   .mx-30{margin-left:30px;margin-right:30px}
   .mx-35{margin-left:35px;margin-right:35px}
   .mx-40{margin-left:40px;margin-right:40px}
   .mx-45{margin-left:45px;margin-right:45px}
   .mx-50{margin-left:50px;margin-right:50px}

   /* y */
   
   .my-5{margin-top:5px;margin-bottom:5px}
   .my-10{margin-top:10px;margin-bottom:10px}
   .my-15{margin-top:15px;margin-bottom:15px}
   .my-20{margin-top:20px;margin-bottom:20px}
   .my-25{margin-top:25px;margin-bottom:25px}
   .my-30{margin-top:30px;margin-bottom:30px}
   .my-35{margin-top:35px;margin-bottom:35px}
   .my-40{margin-top:40px;margin-bottom:40px}
   .my-45{margin-top:45px;margin-bottom:45px}
   .my-50{margin-top:50px;margin-bottom:50px}
   
   /* =========================
      PADDING
   ========================= */
   
   .p-5{padding:5px}
   .p-10{padding:10px}
   .p-15{padding:15px}
   .p-20{padding:20px}
   .p-25{padding:25px}
   .p-30{padding:30px}
   .p-35{padding:35px}
   .p-40{padding:40px}
   .p-45{padding:45px}
   .p-50{padding:50px}
   
   /* =========================
      RESPONSIVE
   ========================= */
   
   /* md */
   
   @media (min-width:768px){
   
   .md\:flex{display:flex}
   .md\:grid{display:grid}
   
   .md\:flex-row{flex-direction:row}
   .md\:flex-col{flex-direction:column}
   
   .md\:grid-cols-2{grid-template-columns:repeat(2,1fr)}
   .md\:grid-cols-3{grid-template-columns:repeat(3,1fr)}
   
   .md\:mt-30{margin-top:30px}
   .md\:mt-40{margin-top:40px}
   .md\:mt-50{margin-top:50px}

   /* y */

   .md\:my-5{margin-top:5px;margin-bottom:5px}
   .md\:my-10{margin-top:10px;margin-bottom:10px}
   .md\:my-15{margin-top:15px;margin-bottom:15px}
   .md\:my-20{margin-top:20px;margin-bottom:20px}
   .md\:my-25{margin-top:25px;margin-bottom:25px}
   .md\:my-30{margin-top:30px;margin-bottom:30px}
   .md\:my-35{margin-top:35px;margin-bottom:35px}
   .md\:my-40{margin-top:40px;margin-bottom:40px}
   .md\:my-45{margin-top:45px;margin-bottom:45px}
   .md\:my-50{margin-top:50px;margin-bottom:50px}
   
   }
   
   /* lg */
   
   @media (min-width:1024px){
   
   .lg\:flex{display:flex}
   
   .lg\:grid-cols-3{grid-template-columns:repeat(3,1fr)}
   .lg\:grid-cols-4{grid-template-columns:repeat(4,1fr)}

   /* y */

   .lg\:my-5{margin-top:5px;margin-bottom:5px}
   .lg\:my-10{margin-top:10px;margin-bottom:10px}
   .lg\:my-15{margin-top:15px;margin-bottom:15px}
   .lg\:my-20{margin-top:20px;margin-bottom:20px}
   .lg\:my-25{margin-top:25px;margin-bottom:25px}
   .lg\:my-30{margin-top:30px;margin-bottom:30px}
   .lg\:my-35{margin-top:35px;margin-bottom:35px}
   .lg\:my-40{margin-top:40px;margin-bottom:40px}
   .lg\:my-45{margin-top:45px;margin-bottom:45px}
   .lg\:my-50{margin-top:50px;margin-bottom:50px}
   
   }
   
   /* xl */
   
   @media (min-width:1280px){
   
   .xl\:flex{display:flex}
   
   }