@charset "UTF-8";
/*
   From https://www.aleksandrhovhannisyan.com/blog/fluid-type-scale-with-css-clamp/
   Generates the css clamp function.
   Focused on font-size, but may be used for margins and padding

   Usage:
      clamped(min-size-px, max-size-px, min-browser-width-px, max-browser-width-px)
      font-size: clamped(26px, 36px, 600px, 1200px);
      font-size: clamped(26px, 36px);      //using width default values

*/
/* convenience mixin for bottom-only spacing */
.two-column-block {
  display: flex;
  flex-direction: row;
  gap: min(2em, 3vw);
  justify-content: left;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.column-topics {
  width: 45%;
}

.column-topics h3 {
  font-size: clamp(1.25rem, 1.11vw + 0.9rem, 1.88rem);
  text-align: left;
  margin-left: 0.9375rem;
  margin-bottom: 5px;
}

.column-left {
  flex: 0 0 20%; /* don’t grow, don’t shrink, fixed 30% */
}

.column-left h2 {
  text-align: left;
}

.column-right {
  display: flex;
  flex: 0 0 80%; /* don’t grow, don’t shrink, fixed 70% */
  align-items: center;
  padding: 5px;
}

/*
.header-color-section {
  background-color: transparent;
  background-image: linear-gradient(180deg, $primary-start 0%, $primary-end 100%);
  color: $color-menu-font;
}

*/
.header-color-section a:not(.btn) {
  color: #F6F3EE;
}

.white-font {
  color: #F6F3EE;
}

.column-left img {
  margin-left: 0px;
  max-height: 350px;
  max-width: 350px;
}

@media only screen and (max-width: 800px) {
  .two-column-block {
    flex-direction: column;
  }
  .column-topics {
    width: 95%;
  }
  .column-left img {
    max-height: 100%;
    max-width: 100%;
  }
}

/*# sourceMappingURL=two-col-topics.css.map */