@import 'variable.scss';

/* ==========================================================================
 *
 * File Name:         Grid & Layout & visibility
 * Description:       Flexbox Responsive Grid
 * Editing Details:   Do NOT modify variables or code in this file as that may
 *                    cause Berry's responsive framework to malfunction
 *
 ============================================================================ */

/* Border Box Model */
html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

//Layout and Visibility
.max-width-center {
  width: 100%;
  justify-content: center;
}

.hide {
  display: none;
}

.show {
  display: block;
}

//Container Spacing & Widths

.container-s, .container-m, .container-l {
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
}

.container-s {
    padding: $padding-s;
    margin: 0;
}

.container-m {
    padding: $padding-m;
    margin: 0;
}

.container-l {
    padding: $padding-l;
    margin: 0;
}

/* ==========================================================================
 * Method 1: Writing Flexbox responsive grid using calc and box model
 * Use tag such as <header>, <main>, <aside>, <li> to declare the column &
   span of the layout by predeterminate the columns, width(span), gap and
   flexbasis of the elements.
 * Advantage: By changing the value of width, gap percentage of each element 
              (<header>), the layout can be modified very easily
 * Disadvantage: Empty space need to be code in since it's flex box model
 ============================================================================ */



//For Smartphone dimension
.container, ul { 
    margin: 0 auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    --columns: 6;
}

header, main, aside, li {
    /* flex-basis declaration
    flex-basis: calc( calc(6/6) * 100%);
    */
    --width: 6;
    --initialbasis: calc(var(--width) / var(--columns) * 100%);
    --gap: calc((var(--columns) -  var(--width)) * 0.05%);
    flex-basis: calc(var(--initialbasis) - var(--gap));
}
// For Tablet dimension    
@media (min-width: 551px) {
    aside, main, li {
    --width: 3;
    }
}
// For Desktop dimension 
@media (min-width: 751px) {
    main {
        --width: 4;
    }
    aside {
        --width: 2;
    }
    li {
        --width: 3;
    }
}

.container > *, li {
    background-color: $mute;
    border: 2px solid white;
    border-radius: 0.5rem;
    padding: $padding-m;
  }
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

//Section Spacing & Widths

section {
    display: block;
    height: min-content;
    position: relative;
  }

d

/* General Element Widths */
h1, h2, h3, h4, h5, div{
  width: 100%;
}

p, h6, img {
  width: 90%;
}

/* ==========================================================================
 * Method 2: Writing Grid system using column and span 
 * Use class such as .col-1 to .col-6 to determinate the span of the columns
   or use .col-1-3 to determinate column that starts on column 1 and ends 
   before column 3, so it has 2 column of span.
 * Advantage: No need to code empty space since column can start and end at
   one's choice.
 * Disadvantage: User can be confused the start and end of the columns
 ============================================================================ */

 .grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto;
  justify-content: space-around;
  max-width: 100%;
 }

// To determinate the column span that could be from 1 to 6

.col-1 {
  grid-column: span 1;
}

.col-2 {
  grid-column: span 2;
}

.col-3 {
  grid-column: span 3;
}

.col-4 {
  grid-column: span 4;
}

.col-5 {
  grid-column: span 5;
}

.col-6 {
  grid-column: span 6;
}

// To determinate the column span with start and end points

// Column that starts at column 1 and span 1 column, end before column 2
.col-1-2 {
  grid-column: 1/2;
}

// Column that starts at column 1 and span 2 column, end before column 3
.col-1-3 {
  grid-column: 1/3;
}

.col-1-4 {
  grid-column: 1/4;
}

.col-1-5 {
  grid-column: 1/5;
}

.col-1-6 {
  grid-column: 1/6;
}

.col-1-7 {
  grid-column: 1/7;
}

.col-2-3 {
  grid-column: 2/3;
}

.col-2-4 {
  grid-column: 2/4;
}

.col-2-5 {
  grid-column: 2/5;
}

.col-2-6 {
  grid-column: 2/6;
}

.col-2-7 {
  grid-column: 2/7;
}

.col-3-4 {
  grid-column: 3/4;
}

.col-3-5 {
  grid-column: 3/5;
}

.col-3-6 {
  grid-column: 3/6;
}

.col-3-7 {
  grid-column: 3/7;
}

.col-4-5 {
  grid-column: 4/5;
}

.col-4-6 {
  grid-column: 4/6;
}

.col-4-7 {
  grid-column: 4/7;
}

.col-5-6 {
  grid-column: 5/6;
}

.col-5-7 {
  grid-column: 5/7;
}

.col-6-7 {
  grid-column: 6/7;
}

/* Column and row gap widths */
.col-gap-zero {
  grid-column-gap: 0rem !important;
}
.col-gap-s {
  grid-column-gap: 0.25rem !important;
}
.col-gap-m {
  grid-column-gap: 0.5rem !important;
}
.col-gap-l {
  grid-column-gap: 0.75rem !important;
}
.col-gap-xl {
  grid-column-gap: 1rem !important;
}

// Or customize your own .col-gap-[size]

.row-gap-zero {
  grid-row-gap: 0rem !important;
}
.row-gap-s {
  grid-column-gap: 0.25rem !important;
}
.row-gap-m {
  grid-column-gap: 0.5rem !important;
}
.row-gap-l {
  grid-column-gap: 0.75rem !important;
}
.row-gap-xl {
  grid-column-gap: 1rem !important;
}

// Or customize your own .row-gap-[size]