.com-content-and-image {
  --width: calc(100% - 4px);
  --min-height: 440px;
  --image-grid-width: 1.1fr;
  --border-color: hsl(0 0% 100% / 1);
  --border-radius: 16px;
  /* Todo: Adjust these colors. */
  --bg-color-1: var(--color-primary-purple);
  --bg-color-2: var(--color-primary-purple);
  --bg-color-3: var(--color-primary-purple);
  --bg-color-4: var(--color-primary-purple);
  /* --bg-color-2: hsl(225 70% 23% / 1); */
  /* --bg-color-3: hsl(19 60% 47% / 1); */
  /* --bg-color-4: hsl(20 60% 25% / 1); */
}

.com-content-and-image {
  width: var(--width); max-width: 100% !important; margin: auto;
  border-radius: var(--border-radius); overflow: hidden;
  .layout {
    display: grid;
    grid-template-areas: "text img";
    grid-template-columns: 1fr var(--image-grid-width);
    min-height: var(--min-height);
  }
  h1, h2, h3, h4, h5, h6 { margin-top: 0; }
  .kicker { margin-bottom: 0.8rem; opacity: 0.5; }
  .link {
    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); }
  }
  &.collection {
    border-radius: 0;
    &.first { border-radius: var(--border-radius) var(--border-radius) 0 0; }
    &.last { border-radius: 0 0 var(--border-radius) var(--border-radius); }
    &.nth-even .layout {
      grid-template-areas: "img text";
      grid-template-columns: var(--image-grid-width) 1fr;
    }
  }
  & + & { margin-top: 0 !important; border-top: 1px solid hsl(0 0% 0% / 1); }
  &.nth-1 .com-content-and-image-text-container { background: var(--bg-color-1); }
  &.nth-2 .com-content-and-image-text-container { background: var(--bg-color-2); }
  &.nth-3 .com-content-and-image-text-container { background: var(--bg-color-3); }
  &.nth-4 .com-content-and-image-text-container { background: var(--bg-color-4); }
  &.nth-5 .com-content-and-image-text-container { background: var(--bg-color-1); }
  &.nth-6 .com-content-and-image-text-container { background: var(--bg-color-2); }
  &.nth-8 .com-content-and-image-text-container { background: var(--bg-color-3); }
  &.nth-9 .com-content-and-image-text-container { background: var(--bg-color-4); }
}

.com-content-and-image-text-container {
  grid-area: text;
  padding: 100px 64px 100px 60px;
  color: hsl(0 0% 100% / 1);
  * { color: hsl(0 0% 100% / 1); }
  background: var(--bg-color-1);
}

.com-content-and-image-image-container {
  grid-area: img;
  position: relative;
  img {
    position: absolute; left: 0; top: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 50%;
  }
}