/* Vars */
:root {
  --column-gap: var(--xl-4, 112px);
}
/* Both Alternating Columns and Reverse */
.alternating-columns, .alternating-columns--reverse {
  width: 100%;
  /* Image */
  /* Text Column */
}
.alternating-columns .column-container, .alternating-columns--reverse .column-container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  margin-bottom: clamp(5.4rem, calc(5.4rem + ((1vw - 0.32rem) * 12.3913)), 16.8rem);
  /*adjust margin*/
}
.alternating-columns .column-container:last-child, .alternating-columns--reverse .column-container:last-child {
  margin-bottom: 0px;
}
.alternating-columns .column-container > div, .alternating-columns--reverse .column-container > div {
  width: 50%;
}
.alternating-columns .column-img, .alternating-columns--reverse .column-img {
  align-items: center;
}
.alternating-columns .column-img > img, .alternating-columns--reverse .column-img > img {
  /*height: 100%;*/
  /* Removed because of Safari issues */
  min-height: 350px;
  object-fit: cover;
}
.alternating-columns .column-txt, .alternating-columns--reverse .column-txt {
  flex-direction: column;
  display: flex;
  align-items: flex-start;
  text-align: left;
  justify-content: center;
  gap: var(--sm-3, 32px);
  /*to have automatic margin when h2 is detected*/
}
.alternating-columns .column-txt > h2, .alternating-columns--reverse .column-txt > h2 {
  margin-bottom: 32px;
}
.alternating-columns .column-txt p, .alternating-columns--reverse .column-txt p {
  margin-block-end: 24px;
}
.alternating-columns .column-txt p:first-child, .alternating-columns--reverse .column-txt p:first-child {
  margin-block-start: 0;
}
.alternating-columns .column-txt p:last-child, .alternating-columns--reverse .column-txt p:last-child {
  margin-block-end: 0;
}
/*-----------------------------------------------------*/
/* Alternating Columns (Image on the Right) */
.alternating-columns > .column-container .column-txt {
  padding-right: var(--column-gap);
}
.alternating-columns > div:nth-child(even) {
  flex-direction: row-reverse;
}
.alternating-columns > .column-container:nth-child(even) .column-txt {
  padding-left: var(--column-gap);
  padding-right: 0;
}
/* Reverse Columns (Image on the Left) */
.alternating-columns--reverse > .column-container .column-txt {
  padding-left: var(--column-gap);
}
.alternating-columns--reverse > div:nth-child(odd) {
  flex-direction: row-reverse;
}
.alternating-columns--reverse > div:nth-child(even) {
  flex-direction: row;
}
.alternating-columns--reverse > .column-container:nth-child(even) .column-txt {
  padding-left: 0px;
  padding-right: var(--column-gap);
}
/*-----------------------------------------------------*/
/* Mobile */
@media (max-width: 991px) {
  .alternating-columns .column-container, .alternating-columns--reverse .column-container {
    flex-direction: column-reverse !important;
  }
  .alternating-columns .column-container > div, .alternating-columns--reverse .column-container > div {
    width: 100%;
  }
  .alternating-columns .column-container > .column-img, .alternating-columns--reverse .column-container > .column-img {
    margin-bottom: 30px;
  }
  .alternating-columns .column-container > .column-img img, .alternating-columns--reverse .column-container > .column-img img {
    min-height: 150px;
    max-height: 80vh;
  }
  .alternating-columns .column-container .column-txt, .alternating-columns--reverse .column-container .column-txt {
    padding: 0 !important;
  }
}