/*
 * @file
 * Provides the column styles for all layouts.
 */

/*
 * Styling for KLG layouts in admin and FE area.
 */
.gin--edit-form .grid--row,
.layout .grid--row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-gap: 30px;
}

@media screen and (max-width: 768px) {
  /* Mobile: remove space */
  .layout.mb-remove-space-between .grid--row {
    gap: 0;
  }

  /* Mobile: 2 column reverse */
  .layout.mb-reverse-layout .grid--50-50 > :nth-child(1),
  .layout.mb-reverse-layout .grid--33-66 > :nth-child(1),
  .layout.mb-reverse-layout .grid--66-33 > :nth-child(1) { 
    order: 2;
  }
  .layout.mb-reverse-layout .grid--50-50 > :nth-child(2),
  .layout.mb-reverse-layout .grid--33-66 > :nth-child(2),
  .layout.mb-reverse-layout .grid--66-33 > :nth-child(2) { 
    order: 1;
  }

  /* Mobile: 3 column reverse */
  .layout.mb-reverse-layout .grid--33-33-33 > :nth-child(1),
  .layout.mb-reverse-layout .grid--25-50-25 > :nth-child(1),
  .layout.mb-reverse-layout .grid--25-25-50 > :nth-child(1),
  .layout.mb-reverse-layout .grid--50-25-25 > :nth-child(1) {
    order: 3;
  }
  .layout.mb-reverse-layout .grid--33-33-33 > :nth-child(2),
  .layout.mb-reverse-layout .grid--25-50-25 > :nth-child(2),
  .layout.mb-reverse-layout .grid--25-25-50 > :nth-child(2),
  .layout.mb-reverse-layout .grid--50-25-25 > :nth-child(2) {
    order: 2;
  }
  .layout.mb-reverse-layout .grid--33-33-33 > :nth-child(3),
  .layout.mb-reverse-layout .grid--25-50-25 > :nth-child(3),
  .layout.mb-reverse-layout .grid--25-25-50 > :nth-child(3),
  .layout.mb-reverse-layout .grid--50-25-25 > :nth-child(3) {
    order: 1;
  }

  /* Mobile: 4 column reverse */
  .layout.mb-reverse-layout .grid--25-25-25-25 > :nth-child(1) { order: 4; }
  .layout.mb-reverse-layout .grid--25-25-25-25 > :nth-child(2) { order: 3; }
  .layout.mb-reverse-layout .grid--25-25-25-25 > :nth-child(3) { order: 2; }
  .layout.mb-reverse-layout .grid--25-25-25-25 > :nth-child(4) { order: 1; }
}

@media screen and (min-width: 768px) {
  .gin--edit-form .grid--66,
  .layout .grid--66 {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-gap: 0;
  }

  .gin--edit-form .grid--50-50,
  .layout .grid--50-50 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gin--edit-form .grid--66-33,
  .layout .grid--66-33 {
     grid-template-columns:
      calc(2 * ((100% - 60px) / 3) + 30px)
      calc((100% - 60px) / 3);
    gap: 30px;
  }

  .gin--edit-form .grid--33-66,
  .layout .grid--33-66 {
    grid-template-columns:
      calc((100% - 60px) / 3)
      calc(2 * ((100% - 60px) / 3) + 30px);
    gap: 30px;
  }

  .gin--edit-form .grid--33-33-33,
  .layout .grid--33-33-33 {
    grid-template-columns:
      calc((100% - 60px) / 3)
      calc((100% - 60px) / 3)
      calc((100% - 60px) / 3);
    gap: 30px;
  }

  .gin--edit-form .grid--25-50-25,
  .layout .grid--25-50-25 {
    grid-template-columns:
      calc((100% - 90px) / 4)
      calc(2 * ((100% - 90px) / 4) + 30px)
      calc((100% - 90px) / 4);
    gap: 30px;
  }

  .gin--edit-form .grid--25-25-50,
  .layout .grid--25-25-50 {
    grid-template-columns:
      calc((100% - 90px) / 4)
      calc((100% - 90px) / 4)
      calc(2 * ((100% - 90px) / 4) + 30px);
    gap: 30px;
  }

  .gin--edit-form .grid--50-25-25,
  .layout .grid--50-25-25 {
    grid-template-columns:
      calc(2 * ((100% - 90px) / 4) + 30px)
      calc((100% - 90px) / 4)
      calc((100% - 90px) / 4);
    gap: 30px;
  }

  .gin--edit-form .grid--25-25-25-25,
  .layout .grid--25-25-25-25 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (min-width: 1200px) {
  .gin--edit-form .grid--25-25-25-25,
  .layout .grid--25-25-25-25 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}