.com-feature-break {
  --min-height: 440px;
  --border-color: hsl(0 0% 100% / 1);
  --border-radius: 16px;
}

.com-feature-break {
  width: calc(100% - 4px); max-width: 100% !important; margin: auto;
  border-radius: var(--border-radius); overflow: hidden;
  background: var(--color-primary-purple);
  .layout {
    display: grid; grid-template-columns: 2fr 1.5fr;
    min-height: var(--min-height);
  }
  h1, h2, h3, h4, h5, h6 { margin-top: 0; }
  a {
    display: inline-flex; align-items: center;
    font-weight: bold; text-decoration: none;
    color: var(--color-primary-yellow);
    svg {
      stroke: var(--color-primary-yellow);
      transform: scale(0.9) translate(5px, 2px);
      transition: transform ease-in-out 200ms;
    }
    &[href]:hover svg { transform: scale(0.9) translate(10px, 2px); }
  }
}

.com-feature-break-text-container {
  padding: 100px 64px 100px 60px;
  color: hsl(0 0% 100% / 1);
  p { color: hsl(0 0% 100% / 1); }
}

.com-feature-break-image-container {
  position: relative;
  img {
    --radius: 1000px;
    position: absolute; left: 0; top: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 50%;
    border-radius: var(--radius) 0 0 var(--radius);
  }
}

@media (width <= 800px) {
  .com-feature-break {
    max-width: var(--mobile-content-max-width) !important;
    margin: 4px auto;
    border-radius: var(--border-radius) !important;
    /* max-width: 100% !important; */
    /* border-radius: 0 !important; */
  }
  .com-feature-break .layout {
    grid-template-areas: "img" "text" !important;
    grid-template-columns: 1fr !important;
  }
  .com-feature-break-text-container {
    grid-area: text;
    padding: 2.7rem 1.3rem;
    h2 { margin-bottom: 1.0rem; font-size: 1.4rem; }
  }
  .com-feature-break-image-container {
    grid-area: img;
    position: relative;
    height: 400px;
    img {
      position: relative; display: block;
      width: 100%; height: 100%;
      border-radius: 0;
    }
  }
}