/*
*
* Intercode CSS grid and standard styles
* v1.7 (15.11.2025) - Added *-show classes to only display elements from size and up (.ic-small-show, .ic-medium-show, .ic-large-show)
* v1.6 (17.09.2025) - Converted breakpoints in mediaqueries from "em" to "px" for more control
* v1.5 (26.02.2025) - Fixed the hide classes so they properly hide elements mobile-first (.ic-xsmall-hide ++)
* v1.4 (14.02.2025) - Removed unneccesary prefix classes for older browsers. Added .cell-endrow class for full width of the last cell in row
* v1.3 (28.01.2025) - Bugfix: If there was not enough elements to fill the row the last element aligned to the right (.ic-grid)
* v1.2 (25.01.2025) - Fix2 left alignment of last element in grid (.ic-grid::after)
* v1.1 (22.02.2021) - Fix left alignment of last element in grid (.ic-grid::after)
* v1.0
*
*/

/**** settings ******/
:root{
  --gutter-size: 10px;
}
/********/


/***** standard styles *******/
img { display:inline-block; max-width:100%; height:auto; border-style:none; }
/*******/


/*******  container and grid *********/
.ic-container { margin-right: auto;  margin-left: auto; box-sizing:border-box; max-width: 75em; }
.ic-grid {  box-sizing: border-box;  display: flex;  flex: 0 1 auto;  flex-direction: row;  flex-wrap: wrap; justify-content:flex-start; }
.ic-grid::after { content:''; flex:0 0 100%; height:0; }
.ic-grid.reverse {  flex-direction: row-reverse; }
.col.reverse {  flex-direction: column-reverse; }
/**********/


/***** padding and margins *******/
.cell { flex-basis: 100%; max-width: 100%; box-sizing:border-box; } 
.ic-grid-padding > .cell { padding:var(--gutter-size); }
.ic-grid-space { gap:var(--gutter-size); }
/*******/

/******* xsmall and default styles (< 48em = 768px) *******/
.xsmall, .xsmall-1, .xsmall-2, .xsmall-3, .xsmall-4, .xsmall-5, .xsmall-6, .xsmall-7, .xsmall-8, .xsmall-9, .xsmall-10, .xsmall-11, .xsmall-12 {  box-sizing: border-box;  flex: 0 0 auto; }
.xsmall, .small, .medium, .large {  flex-grow:1; flex-basis:0;  max-width:100%; }

.xsmall-1 {  flex-basis: 8.333%;  max-width: 8.333%; }
.xsmall-2 {  flex-basis: 16.667%; max-width: 16.667%; }
.xsmall-3 {  flex-basis: 25%;  max-width: 25%; }
.xsmall-4 {  flex-basis: 33.333%;  max-width: 33.333%; }
.xsmall-5 {  flex-basis: 41.667%;  max-width: 41.667%; }
.xsmall-6 {  flex-basis: 50%;  max-width: 50%; }
.xsmall-7 {  flex-basis: 58.333%;  max-width: 58.333%; }
.xsmall-8 {  flex-basis: 66.667%;  max-width: 66.667%; }
.xsmall-9 {  flex-basis: 75%;  max-width: 75%; }
.xsmall-10 { flex-basis: 83.333%;  max-width: 83.333%; }
.xsmall-11 { flex-basis: 91.667%;  max-width: 91.667%; }
.xsmall-12 { flex-basis: 100%;  max-width: 100%; }

.ic-grid-space > .xsmall-1:not(.cell-endrow) { max-width:calc(8.333% - var(--gutter-size)); }
.ic-grid-space > .xsmall-2:not(.cell-endrow) { max-width:calc(16.667% - var(--gutter-size)); }
.ic-grid-space > .xsmall-3:not(.cell-endrow) { max-width:calc(25% - var(--gutter-size)); }
.ic-grid-space > .xsmall-4:not(.cell-endrow) { max-width:calc(33.333% - var(--gutter-size)); }
.ic-grid-space > .xsmall-5:not(.cell-endrow) { max-width:calc(41.667% - var(--gutter-size)); }
.ic-grid-space > .xsmall-6:not(.cell-endrow) { max-width:calc(50% - var(--gutter-size)); }
.ic-grid-space > .xsmall-7:not(.cell-endrow) { max-width:calc(58.333% - var(--gutter-size)); }
.ic-grid-space > .xsmall-8:not(.cell-endrow) { max-width:calc(66.667% - var(--gutter-size)); }
.ic-grid-space > .xsmall-9:not(.cell-endrow) { max-width:calc(75% - var(--gutter-size)); }
.ic-grid-space > .xsmall-10:not(.cell-endrow) { max-width:calc(83.333% - var(--gutter-size)); }
.ic-grid-space > .xsmall-11:not(.cell-endrow) { max-width:calc(91.667% - var(--gutter-size)); }
.ic-grid-space > .xsmall-12 { /* max-width:calc(100% - var(--gutter-size)); */ }

.ic-xsmall-hide { display:none; }

.ic-xsmall-show { display:block; }
.ic-small-show, .ic-medium-show, .ic-large-show { display:none; }
/***********/

/***** small ( > 48em = 768px) *******/
@media only screen and (min-width: 640px) {
  
  .small, .small-1, .small-2, .small-3, .small-4, .small-5, .small-6, .small-7, .small-8, .small-9, .small-10, .small-11, .small-12 { box-sizing:border-box; flex:0 0 auto;  }

  .small-1 {  flex-basis: 8.333%; max-width: 8.333%; }
  .small-2 {  flex-basis: 16.667%; max-width: 16.667%; }
  .small-3 {  flex-basis: 25%; max-width: 25%; }
  .small-4 {  flex-basis: 33.333%; max-width: 33.333%; }
  .small-5 {  flex-basis: 41.667%; max-width: 41.667%; }
  .small-6 {  flex-basis: 50%; max-width: 50%; }
  .small-7 {  flex-basis: 58.333%; max-width: 58.333%; }
  .small-8 {  flex-basis: 66.667%; max-width: 66.667%; }
  .small-9 {  flex-basis: 75%; max-width: 75%; }
  .small-10 { flex-basis: 83.333%; max-width: 83.333%; }
  .small-11 { flex-basis: 91.667%; max-width: 91.667%; }
  .small-12 { flex-basis: 100%; max-width: 100%; }

  .ic-grid-space > .small-1:not(.cell-endrow) { max-width:calc(8.333% - var(--gutter-size)); }
  .ic-grid-space > .small-2:not(.cell-endrow) { max-width:calc(16.667% - var(--gutter-size)); }
  .ic-grid-space > .small-3:not(.cell-endrow) { max-width:calc(25% - var(--gutter-size)); }
  .ic-grid-space > .small-4:not(.cell-endrow) { max-width:calc(33.333% - var(--gutter-size)); }
  .ic-grid-space > .small-5:not(.cell-endrow) { max-width:calc(41.667% - var(--gutter-size)); }
  .ic-grid-space > .small-6:not(.cell-endrow) { max-width:calc(50% - var(--gutter-size)); }
  .ic-grid-space > .small-7:not(.cell-endrow) { max-width:calc(58.333% - var(--gutter-size)); }
  .ic-grid-space > .small-8:not(.cell-endrow) { max-width:calc(66.667% - var(--gutter-size)); }
  .ic-grid-space > .small-9:not(.cell-endrow) { max-width:calc(75% - var(--gutter-size)); }
  .ic-grid-space > .small-10:not(.cell-endrow) { max-width:calc(83.333% - var(--gutter-size)); }
  .ic-grid-space > .small-11:not(.cell-endrow) { max-width:calc(91.667% - var(--gutter-size)); }
  .ic-grid-space > .small-12 { /*max-width:calc(100% - var(--gutter-size));*/ }

  .ic-xsmall-hide, .ic-small-hide { display:none; }
  .ic-small-show { display:block; }

}
/********/


/***** medium ( > 62em = 992px) *******/
@media only screen and (min-width: 992px) {

  .medium, .medium-1, .medium-2, .medium-3, .medium-4, .medium-5, .medium-6, .medium-7, .medium-8, .medium-9, .medium-10, .medium-11, .medium-12 { box-sizing: border-box; flex: 0 0 auto; }

  .medium-1 {  flex-basis: 8.333%; max-width: 8.333%; }
  .medium-2 {  flex-basis: 16.667%; max-width: 16.667%; }
  .medium-3 {  flex-basis: 25%; max-width: 25%; }
  .medium-4 {  flex-basis: 33.333%; max-width: 33.333%; }
  .medium-5 {  flex-basis: 41.667%; max-width: 41.667%; }
  .medium-6 {  flex-basis: 50%; max-width: 50%; }
  .medium-7 {  flex-basis: 58.333%; max-width: 58.333%; }
  .medium-8 {  flex-basis: 66.667%; max-width: 66.667%; }
  .medium-9 {  flex-basis: 75%;  max-width: 75%; }
  .medium-10 { flex-basis: 83.333%; max-width: 83.333%; }
  .medium-11 { flex-basis: 91.667%; max-width: 91.667%; }
  .medium-12 { flex-basis: 100%; max-width: 100%; }

  .ic-grid-space > .medium-1:not(.cell-endrow) { max-width:calc(8.333% - var(--gutter-size)); }
  .ic-grid-space > .medium-2:not(.cell-endrow) { max-width:calc(16.667% - var(--gutter-size)); }
  .ic-grid-space > .medium-3:not(.cell-endrow) { max-width:calc(25% - var(--gutter-size)); }
  .ic-grid-space > .medium-4:not(.cell-endrow) { max-width:calc(33.333% - var(--gutter-size)); }
  .ic-grid-space > .medium-5:not(.cell-endrow) { max-width:calc(41.667% - var(--gutter-size)); }
  .ic-grid-space > .medium-6:not(.cell-endrow) { max-width:calc(50% - var(--gutter-size)); }
  .ic-grid-space > .medium-7:not(.cell-endrow) { max-width:calc(58.333% - var(--gutter-size)); }
  .ic-grid-space > .medium-8:not(.cell-endrow) { max-width:calc(66.667% - var(--gutter-size)); }
  .ic-grid-space > .medium-9:not(.cell-endrow) { max-width:calc(75% - var(--gutter-size)); }
  .ic-grid-space > .medium-10:not(.cell-endrow) { max-width:calc(83.333% - var(--gutter-size)); }
  .ic-grid-space > .medium-11:not(.cell-endrow) { max-width:calc(91.667% - var(--gutter-size)); }
  .ic-grid-space > .medium-12 { /*max-width:calc(100% - var(--gutter-size)); */}

  .ic-xsmall-hide, .ic-small-hide, .ic-medium-hide { display:none; }
  .ic-medium-show { display:block; }


}
/*********/

/****** large ( > 75em = 1200px)  ******/
@media only screen and (min-width: 1200px) {

  .large, .large-1, .large-2, .large-3, .large-4, .large-5, .large-6, .large-7, .large-8, .large-9, .large-10, .large-11, .large-12 { box-sizing: border-box; flex: 0 0 auto; }

  .large-1 {  flex-basis: 8.333%; max-width: 8.333%; }
  .large-2 {  flex-basis: 16.667%; max-width: 16.667%; }
  .large-3 {  flex-basis: 25%; max-width: 25%; }
  .large-4 {  flex-basis: 33.333%; max-width: 33.333%; }
  .large-5 {  flex-basis: 41.667%; max-width: 41.667%; }
  .large-6 {  flex-basis: 50%; max-width: 50%; }
  .large-7 {  flex-basis: 58.333%; max-width: 58.333%; }
  .large-8 {  flex-basis: 66.667%; max-width: 66.667%; }
  .large-9 {  flex-basis: 75%; max-width: 75%; }
  .large-10 { flex-basis: 83.333%; max-width: 83.333%; }
  .large-11 { flex-basis: 91.667%; max-width: 91.667%; }
  .large-12 { flex-basis: 100%; max-width: 100%; }

  .ic-grid-space > .large-1:not(.cell-endrow) { max-width:calc(8.333% - var(--gutter-size)); }
  .ic-grid-space > .large-2:not(.cell-endrow) { max-width:calc(16.667% - var(--gutter-size)); }
  .ic-grid-space > .large-3:not(.cell-endrow) { max-width:calc(25% - var(--gutter-size)); }
  .ic-grid-space > .large-4:not(.cell-endrow) { max-width:calc(33.333% - var(--gutter-size)); }
  .ic-grid-space > .large-5:not(.cell-endrow) { max-width:calc(41.667% - var(--gutter-size)); }
  .ic-grid-space > .large-6:not(.cell-endrow) { max-width:calc(50% - var(--gutter-size)); }
  .ic-grid-space > .large-7:not(.cell-endrow) { max-width:calc(58.333% - var(--gutter-size)); }
  .ic-grid-space > .large-8:not(.cell-endrow) { max-width:calc(66.667% - var(--gutter-size)); }
  .ic-grid-space > .large-9:not(.cell-endrow) { max-width:calc(75% - var(--gutter-size)); }
  .ic-grid-space > .large-10:not(.cell-endrow) { max-width:calc(83.333% - var(--gutter-size)); }
  .ic-grid-space > .large-11:not(.cell-endrow) { max-width:calc(91.667% - var(--gutter-size)); }
  .ic-grid-space > .large-12 { /*max-width:calc(100% - var(--gutter-size));*/ }

  .ic-xsmall-hide, .ic-small-hide, .ic-medium-hide, .ic-large-hide { display:none; }
  .ic-large-show { display:block; }


}
/*********/