/* stylelint-disable comment-empty-line-before */

.Columns {
  display: flex;
  flex-direction: column;
  gap: 20px;
  gap: var(--spaces, 20px);
}

@media screen and (min-width: 769px) {

.Columns {
    flex-direction: row;
}
  }

.Columns > * {
    flex: 0 0 100%;
    max-width: 100%;
  }

@media screen and (min-width: 769px) {

.Columns > * {
      flex: 0 0 calc(50% - 20px / 2);
      flex: 0 0 calc(50% - var(--spaces, 20px) / 2);
      max-width: 50%;
  }
    }

.Columns.Columns-noGap {
    gap: 0;
  }

.Columns--big {
  justify-content: space-between;
}

@media screen and (min-width: 769px) {
  /* 25% - 75% */

  .Columns--25-75 > *:nth-child(1) {
    flex: 0 0 calc(25% - 20px / 2);
    flex: 0 0 calc(25% - var(--spaces, 20px) / 2);
    max-width: 25%;
  }

  .Columns--25-75 > *:nth-child(2) {
    flex: 0 0 calc(75% - 20px / 2);
    flex: 0 0 calc(75% - var(--spaces, 20px) / 2);
    max-width: 75%;
  }

  /* 75% - 25% */

  .Columns--75-25 > *:nth-child(1) {
    flex: 0 0 calc(75% - 20px / 2);
    flex: 0 0 calc(75% - var(--spaces, 20px) / 2);
    max-width: 75%;
  }

  .Columns--75-25 > *:nth-child(2) {
    flex: 0 0 calc(25% - 20px / 2);
    flex: 0 0 calc(25% - var(--spaces, 20px) / 2);
    max-width: 25%;
  }

  /* 33% - 66% */

  .Columns--33-66 > *:nth-child(1) {
    flex: 0 0 calc(33% - 20px / 2);
    flex: 0 0 calc(33% - var(--spaces, 20px) / 2);
    max-width: 33%;
  }

  .Columns--33-66 > *:nth-child(2) {
    flex: 0 0 calc(67% - 20px / 2);
    flex: 0 0 calc(67% - var(--spaces, 20px) / 2);
    max-width: 67%;
  }

  /* 66% - 33% */

  .Columns--66-33 > *:nth-child(1) {
    flex: 0 0 calc(67% - 20px / 2);
    flex: 0 0 calc(67% - var(--spaces, 20px) / 2);
    max-width: 67%;
  }

  .Columns--66-33 > *:nth-child(2) {
    flex: 0 0 calc(33% - 20px / 2);
    flex: 0 0 calc(33% - var(--spaces, 20px) / 2);
    max-width: 33%;
  }

  /* Spacing Big */

  .Columns--big > *:nth-child(2) {
    max-width: 37%;
  }

  /* 40% - 60% */

  .Columns--40-60 > *:nth-child(1) {
    flex: 0 0 calc(40% - 20px / 2);
    flex: 0 0 calc(40% - var(--spaces, 20px) / 2);
    max-width: 40%;
  }

  .Columns--40-60 > *:nth-child(2) {
    flex: 0 0 calc(60% - 20px / 2);
    flex: 0 0 calc(60% - var(--spaces, 20px) / 2);
    max-width: 60%;
  }

  /* 60% - 40% */

  .Columns--60-40 > *:nth-child(1) {
    flex: 0 0 calc(60% - 20px / 2);
    flex: 0 0 calc(60% - var(--spaces, 20px) / 2);
    max-width: 60%;
  }

  .Columns--60-40 > *:nth-child(2) {
    flex: 0 0 calc(40% - 20px / 2);
    flex: 0 0 calc(40% - var(--spaces, 20px) / 2);
    max-width: 40%;
  }

  /* 3 columns */

  /* 33% - 33% - 33% */

  .Columns--33-33-33 > *:nth-child(1) {
    flex: 1 1 calc(33% - 36px);
    flex: 1 1 calc(33% - var(--spaces, 36px));
  }

  .Columns--33-33-33 > *:nth-child(2) {
    flex: 1 1 calc(33% - 36px);
    flex: 1 1 calc(33% - var(--spaces, 36px));
  }

  .Columns--33-33-33 > *:nth-child(3) {
    flex: 1 1 calc(33% - 36px);
    flex: 1 1 calc(33% - var(--spaces, 36px));
  }

  /* 50% - 25% - 25% */

  .Columns--50-25-25 > *:nth-child(1) {
    flex: 1 1 calc(50% - 36px);
    flex: 1 1 calc(50% - var(--spaces, 36px));
  }

  .Columns--50-25-25 > *:nth-child(2) {
    flex: 1 1 calc(25% - 36px);
    flex: 1 1 calc(25% - var(--spaces, 36px));
  }

  .Columns--50-25-25 > *:nth-child(3) {
    flex: 1 1 calc(25% - 36px);
    flex: 1 1 calc(25% - var(--spaces, 36px));
  }

  /* 25% - 50% - 25% */

  .Columns--25-50-25 > *:nth-child(1) {
    flex: 1 1 calc(25% - 36px);
    flex: 1 1 calc(25% - var(--spaces, 36px));
  }

  .Columns--25-50-25 > *:nth-child(2) {
    flex: 1 1 calc(50% - 36px);
    flex: 1 1 calc(50% - var(--spaces, 36px));
  }

  .Columns--25-50-25 > *:nth-child(3) {
    flex: 1 1 calc(25% - 36px);
    flex: 1 1 calc(25% - var(--spaces, 36px));
  }

  /* 25% - 25% - 50% */

  .Columns--25-25-50 > *:nth-child(1) {
    flex: 1 1 calc(25% - 36px);
    flex: 1 1 calc(25% - var(--spaces, 36px));
  }

  .Columns--25-25-50 > *:nth-child(2) {
    flex: 1 1 calc(25% - 36px);
    flex: 1 1 calc(25% - var(--spaces, 36px));
  }

  .Columns--25-25-50 > *:nth-child(3) {
    flex: 1 1 calc(50% - 36px);
    flex: 1 1 calc(50% - var(--spaces, 36px));
  }

  /* 4 columns */

  /* 25% - 25% - 25% */

  .Columns--25-25-25-25 > *:nth-child(1) {
    flex: 1 1 calc(25% - 36px);
    flex: 1 1 calc(25% - var(--spaces, 36px));
  }

  .Columns--25-25-25-25 > *:nth-child(2) {
    flex: 1 1 calc(25% - 36px);
    flex: 1 1 calc(25% - var(--spaces, 36px));
  }

  .Columns--25-25-25-25 > *:nth-child(3) {
    flex: 1 1 calc(25% - 36px);
    flex: 1 1 calc(25% - var(--spaces, 36px));
  }

  .Columns--25-25-25-25 > *:nth-child(4) {
    flex: 1 1 calc(25% - 36px);
    flex: 1 1 calc(25% - var(--spaces, 36px));
  }
}

@media screen and (min-width: 1921px) {
  /* Spacing Big */

  .Columns--big > *:nth-child(2) {
    max-width: 40%;
  }
}

.Columns--100 > * {
  flex: 0 0 100%;
  max-width: 100%;
}

@media screen and (min-width: 769px) {
    .Column.Theme--green,
    .Column.Theme--gray,
    .Column.Theme--pink,
    .Column.Theme--white {
      padding: 50px;
    }
}

@media screen and (min-width: 1026px) {
  .Column.Column-padding {
    padding-left: 120px;
  }
}