.menu-cta {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  padding: 32px;
  color: $primary-color;
  opacity: 0;
  transition: all 300ms ease-out;

  @include tablet {
    padding: 32px 0 32px 32px;
    flex-direction: row;
    column-gap: 16px;
  }

  @include sm {
    padding: 32px;
    flex-direction: column;
    column-gap: 0;
  }

  .js-active & {
    transition-delay: 500ms;
    opacity: 1;

    &:first-child {
      transition-delay: 300ms;
    }
  }

  &:nth-child(2) {
    .js-children-active & {
      opacity: 0;
    }
  }

  .main-nav-mobile__cta & {
    flex-direction: row;
    column-gap: 16px;
    padding: 24px 0;
  }

  &:last-child {
    border-bottom: none;
  }

  &:hover {
    .menu-cta__image {
      img {
        transform: scale(1.05);
      }
    }
  }

  &__image {
    flex-shrink: 0;
    width: 230px;
    overflow: hidden;

    @include mdx {
      width: 200px;
    }

    @include sm {
      width: 150px;
    }

    .main-nav-mobile__cta &,
    .main-nav-tablet__cta & {
      width: 98px;
    }

    img {
      width: 100%;
      height: 150px;
      object-fit: cover;
      transition: transform 300ms ease-out;

      .main-nav-mobile__cta &,
      .main-nav-tablet__cta & {
        height: 64px;
      }
    }
  }

  &__text {
    line-height: 2rem;
    font-size: 1.4rem;
  }

  &__text-caption {
    margin: 5px 0 15px;
  }

  &__text-heading {
    font-family: var(--font-heading);
    line-height: 22px;
    font-size: 1.8rem;
    font-weight: 600;

    .main-nav-mobile__cta & {
      font-size: 1.8rem;
      font-weight: 600;
      line-height: 120%;
    }
  }

  &__text-link {
    margin-top: 16px;

    a {
      color: $medium-color;
      font-family: $font-default;
      font-size: 1.4rem;
      font-weight: 500;
      line-height: 150%;
      letter-spacing: -0.14px;
    }
  }
}