.pre-footer-cta {
  background: var(--color-primary);
  color: var(--color-cream);
  overflow: hidden;
}

.pre-footer-cta__inner {
  align-items: stretch;
  display: grid;
  grid-template-columns:
    minmax(18rem, 0.9fr)
    minmax(20rem, 1fr)
    minmax(12rem, 0.65fr);
  margin-inline: auto;
  max-width: 90rem;
  min-height: 13.75rem;
}

/* ---------------------------------
   Image
---------------------------------- */

.pre-footer-cta__media {
  clip-path: polygon(
    0 0,
    94% 0,
    97% 10%,
    94% 22%,
    98% 34%,
    95% 47%,
    99% 60%,
    95% 72%,
    98% 84%,
    94% 100%,
    0 100%
  );
  min-width: 0;
}

.pre-footer-cta__media img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* ---------------------------------
   Content
---------------------------------- */

.pre-footer-cta__content {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding:
    var(--space-5)
    var(--space-7);
}

.pre-footer-cta__title {
  color: var(--color-cream);
  font-size: 2.25rem;
  line-height: 1.2;
  margin: 0 0 var(--space-2);
}

.pre-footer-cta__text {
  color: var(--color-cream);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 var(--space-3);
}

.pre-footer-cta__button {
  color: var(--color-cream);
  border-color: var(--color-cream);
  gap: var(--space-2);

  &:hover,
  &:focus {
    background-color: var(--color-cream);
    color: var(--color-primary);
  }
}

/* ---------------------------------
   Handwritten note
---------------------------------- */

.pre-footer-cta__note {
  align-items: center;
  color: var(--color-cream);
  display: flex;
  justify-content: center;
  padding: var(--space-4);
  position: relative;
}

.pre-footer-cta__note p {
  font-family: var(--font-script);
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
  position: relative;
  text-align: center;
  z-index: 2;
}

.pre-footer-cta__trail {
  color: rgb(250 247 242 / 65%);
  height: auto;
  position: absolute;
  width: 12rem;
}

/* ---------------------------------
   Tablet
---------------------------------- */

@media (max-width: 64rem) {
  .pre-footer-cta__inner {
    grid-template-columns:
      minmax(14rem, 0.8fr)
      minmax(18rem, 1.2fr);

    min-height: 13rem;
  }

  .pre-footer-cta__note {
    display: none;
  }

  .pre-footer-cta__content {
    padding-inline: var(--space-6);
  }
}

/* ---------------------------------
   Mobile
---------------------------------- */

@media (max-width: 42rem) {
  .pre-footer-cta__inner {
    display: block;
  }

  .pre-footer-cta__media {
    clip-path: none;
    height: 15rem;
  }

  .pre-footer-cta__content {
    align-items: center;
    padding: var(--space-6) var(--space-4);
    text-align: center;
  }

  .pre-footer-cta__title {
    font-size: 2rem;
  }

  .pre-footer-cta__button {
    width: 100%;
  }
}