/*** 
GRID.CSS 
- VERSION: 240601
- COLLECTION: ESSENTIALS
- LOAD ORDER: CSS/A/02B
- DESCRIPTION: Configures the grid settings for layout elements.
© M. Yıldız 2024. All rights reserved.
##########################
***/

/* #region # MAIN */

/*** 
# GRID SETTINGS
+ Grid is a layout that consists of 12 equal-height columns.
***/

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-row-gap: 2rem;
  grid-column-gap: 2rem;
}

/* Fix for narrow screens. */
@media (max-width: 540px) {
  .grid {
    grid-column-gap: 1rem;
  }
}

/*** 
# GRID CONFIGURATIONS
***/

/* ## Grid: One Column */
.grid .column{
  grid-column: span 12;
}

/* ## Grid--66: Two Columns */
@media (min-width: 800px) {
  .grid--66 .column{
    grid-column: span 6;
  }
}

/* ## Grid-444: Three Columns */
@media (min-width: 800px) {
  .grid--444 .column{
    grid-column: span 4;
  }
}

/* ### Modifiers */

/* > Keep three Columns on tablets. */
@media (min-width: 540px) {
  .grid--444--beta .column {
    grid-column: span 4;
  }
}

/* ## Grid--3333: Four Columns */
@media (min-width: 540px) {
  .grid--3333 .column {
    grid-column: span 6;
  }
}

@media (min-width: 800px) {
  .grid--3333 .column {
    grid-column: span 3;
  }
}

/* ### Modifiers */

/* > Keep four Columns on tablets. */
@media (min-width: 540px) {
  .grid--3333--beta .column {
    grid-column: span 3;
  }
}

/* ## Grid--48: Two Columns with a 1:2 Ratio */
@media (min-width: 800px) {
  .grid--48 .column:first-child{
    grid-column: span 4;
  }

  .grid--48 .column:last-child{
    grid-column: span 8;
  }
}

/* ## Grid--84: Two Columns with a 2:1 Ratio */
@media (min-width: 800px) {
  .grid--84 .column:first-child{
    grid-column: span 8;
  }

  .grid--84 .column:last-child{
    grid-column: span 4;
  }
}

/* ## Grid--39: Two Columns with a 1:3 Ratio */
@media (min-width: 800px) {
  .grid--39 .column:first-child{
    grid-column: span 3;
  }

  .grid--39 .column:last-child{
    grid-column: span 9;
  }
}

/* ## Grid--93: Two Columns with a 3:1 Ratio */
@media (min-width: 800px) {
  .grid--93 .column:first-child{
    grid-column: span 9;
  }

  .grid--93 .column:last-child{
    grid-column: span 3;
  }
}

/* ## Grid--633: Three Columns with a 2:1:1 Ratio */
@media (min-width: 800px) {
  .grid--633 .column:nth-child(1){
    grid-column: span 6;
  }

  .grid--633 .column:nth-child(2){
    grid-column: span 3;
  }

  .grid--633 .column:nth-child(3){
    grid-column: span 3;
  }
}

/* ## Grid--363: Three Columns with a 1:2:1 Ratio */
@media (min-width: 800px) {
  .grid--363 .column:nth-child(1){
    grid-column: span 3;
  }

  .grid--363 .column:nth-child(2){
    grid-column: span 6;
  }

  .grid--363 .column:nth-child(3){
    grid-column: span 3;
  }
}

/* ## Grid--336: Three Columns with a 1:1:2 Ratio */
@media (min-width: 800px) {
  .grid--336 .column:nth-child(1){
    grid-column: span 3;
  }

  .grid--336 .column:nth-child(2){
    grid-column: span 3;
  }

  .grid--336 .column:nth-child(3){
    grid-column: span 6;
  }
}

/* #endregion */