/*
 * Copyright (c) 2025 TechDivision GmbH
 * All rights reserved
 *
 * This product includes proprietary software developed at TechDivision GmbH, Germany
 * For more information see https://www.techdivision.com/
 *
 * To obtain a valid license for using this software please contact us at
 * license@techdivision.com
 */

.columns [data-valign='middle'] {
  align-self: center;
}

.columns [data-valign='bottom'] {
  align-self: flex-end;
}

.columns img {
  width: 100%;
}

.columns > div {
  margin-bottom: var(--spacing-simple);
  column-gap: var(--spacing-simple);
}

.columns > div > div {
  order: 1;
}

.columns > div > .columns-img-col {
  order: 0;
  margin-bottom: var(--spacing-half);
}

.columns > div > .columns-img-col img {
  display: block;
}

.columns.usp {
  padding: 0 var(--spacing-simple);
}

.columns.usp span.icon {
  box-sizing: border-box;
  width: 85px;
  height: 85px;
  padding: 15px 20px 20px;
  background: var(--color-red);
  border-radius: 50%;
}

.columns.usp > div:first-child p strong {
  font-size: var(--heading-font-size-m);
  line-height: var(--heading-line-height-m);
}

/* 1/4, 3/4 */
.columns.one-quarter-three-quarter > div {
  font-size: var(--body-font-size-xs);
  padding: var(--spacing-quarter);

  @media (width >= 600px) {
    padding: 0;
    display: flex;
    gap: var(--spacing-quarter);
  }

  @media (width >= 900px) {
    font-size: var(--body-font-size-m);
    gap: var(--spacing-simple);
  }

  > div:first-child {
    flex: 0 0 25%;
  }

  .icon {
    &.icon-email {
      line-height: 20px;
      vertical-align: unset;
    }
  }
}

/* metrics */
.columns.metrics > div > div {
  margin-bottom: var(--spacing-simple);
}

.columns.metrics > div > div > p {
  margin: 0;
  font-size: var(--metrics-font-size);
  line-height: var(--metrics-line-height);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.columns.metrics > div > div > p:first-child {
  font-size: var(--metrics-heading-font-size);
  line-height: var(--metrics-heading-line-height);
}

.columns.dynamic-width > div {
  justify-content: center;
}

.columns.dynamic-width > div > div {
  flex: auto;
}

.columns.original-image-size > div > .columns-img-col img {
  width: auto;
  display: inline-block;
}

.columns.small-text {
  font-size: var(--body-font-size-s);
}

/* styling desktop */
@media (width >= 1200px) {
  .columns.usp {
    padding: 0;
  }
}

.columns .button-container {
  text-align: center;
}

@media (width >= 900px) {
  .columns > div {
    max-width: 100%;
    display: flex;
    align-items: start;
    flex-direction: unset;
    gap: var(--spacing-simple);
  }

  .columns > div > div {
    flex: 1;
    order: unset;
  }

  .columns.metrics > div {
    width: var(--page-width);
  }
}