/* Mengatur body sebagai Grid Container */
body {
   display                 : grid;
   grid-template-columns	: 1fr; /*hanya ada 1 kolom mengambil seluruh lebar web */
   grid-template-rows      : auto 1fr auto; /* header(auto) main(1fr) footer(auto) */
   grid-template-areas     :	"header"
                              "main"
      								"footer"; 
}
/* *{
   border: solid 1px red;
} */
header	{ 	grid-area	: header; }
main		{ 	grid-area	: main; }
footer 	{ 	grid-area	: footer; }

.main-start{
   margin-block-start   : 4.694rem; /*JIKA TINGGI NAV 2rem MAKA margin-block-start juga 2rem */
   padding-block        : 2rem;
}

/* Styling tambahan agar terlihat */
/* header {
   background-color  : #f0f0f0; 
   border-bottom     : 1px solid #ccc;
}  */

/* footer {
   background-color  : #333;
   color             : white;
   border-top        : 1px solid #ccc;
} */


.breadcrumb-filter{
   display           : flex;
   align-items       : center;
   justify-content   : space-between;
}
@media (max-width : 480px) {
   .breadcrumb-filter{
      flex-direction : column ;
   }
}

.grid-auto{
   --min-column-width      : 15.625rem;
   display                 : grid;
   grid-template-columns   : repeat(auto-fit, minmax(min(var(--min-column-width),100%), var(--min-column-width)));
   gap                     : 2rem;
   transition              : all 0.3s ease;
   justify-content         : center;
}

@media (max-width : 768px){
   .grid-auto{
      grid-template-columns   : 1fr;
      /* grid-template-columns   : 1fr 1fr; */
   }
   
}
@media (min-width : 769px) and (max-width : 1024px){
   .grid-auto{
      grid-template-columns   : repeat(auto-fill, minmax(min(var(--min-column-width),100%), 1fr));
   }
}
@media (min-width : 1025px){
   .grid-auto{
      grid-template-columns   : repeat(auto-fill, minmax(min(var(--min-column-width),100%), 1fr));
   }
}
.grid-card{
   background-color  : var(--color-grey75);
   transition        : transform 0.3s ease, box-shadow 0.3s ease;
   padding           : 1rem;
}
.card-top-feature, .card-bottom-feature{
   display           : flex;
   align-items       : center;
   justify-content   : space-between;
}
.card-top-feature, .card-image, .card-title, .card-bottom-feature, .card-desc{ margin-bottom : 1rem}
.card-title{
   font-size   : var(--font-size-400);
   text-wrap   : balance;
}
.main-with-aside{
   display                 : grid;
   grid-template-columns   : var(--left) var(--right);
   gap                     : 2rem; 
   align-items             : start;
}

@media (max-width : 480px){
   
   .main-with-aside{grid-template-columns : 1fr;}
   .main-with-aside > :first-child{order : var(--order-1);}
   .main-with-aside > :last-child{order : var(--order-2);}
}
@media (max-width : 768px){
   .main-with-aside{grid-template-columns : 1fr;}
   .main-with-aside > :first-child{order : var(--order-1);}
   .main-with-aside > :last-child{order : var(--order-2);}
}
/* @media (max-width : 1024px){}
@media (min-width : 1025px){} */