/* Image with Positioned Text Section */
.image-with-positioned-text {
  padding-top: clamp(var(--padding-top-mobile), 4vw, var(--padding-top-desktop));
  padding-bottom: clamp(var(--padding-bottom-mobile), 4vw, var(--padding-bottom-desktop));

  .image-with-positioned-text__container {
    width: 100%;
    background-color: var(--bg-color, #f6f6f6);
    padding-top: 3.5rem;
    padding-bottom: 3rem;

    @media screen and (min-width: 768px) {
      display: flex;
      align-items: center;
      padding: 0;
    }

    @media screen and (min-width: 1440px) {
      max-height: 90vh;
    }
  }

  .image-with-positioned-text__heading,
  .image-with-positioned-text__heading *,
  .image-with-positioned-text__content-heading,
  .image-with-positioned-text__content-heading * {
    font-size: clamp((var(--font-heading-scale) * 1.75rem), 3.1vw, (var(--font-heading-scale) * 2.75rem));
    font-weight: 800;
    line-height: 1;
    color: var(--color-black);
    margin: 0;
  }

  .image-with-positioned-text__heading {
    margin-bottom: 0.5rem;
    padding: 0 1.5rem;

    @media screen and (min-width: 768px) {
      display: none;
    }
  }

  .image-with-positioned-text__content--mobile {
    .image-with-positioned-text__description, .image-with-positioned-text__button {
      display: block !important;

      @media screen and (min-width: 768px) {
        display: none !important;
      }
    }
    @media screen and (min-width: 768px) {
        display: none !important;
    }
  }
  .image-with-positioned-text__content--desktop {
    .image-with-positioned-text__description, .image-with-positioned-text__button {
      display: none !important;

      @media screen and (min-width: 768px) {
        display: block !important;
      }
    }
    
  }

  .image-with-positioned-text__content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 1.5rem;
    max-width: clamp(22.1875rem, 60vw, 33.875rem);


    @media screen and (min-width: 768px) {
      gap: 2.125rem;
      flex: 0 0 37.6%;
      padding: 3rem 0 3rem 3rem;
      order: 1;
    }

    @media screen and (min-width: 1700px) {
      padding-left: 7.5rem;
    }
  }

  .image-with-positioned-text__description {
    font-size: clamp(calc(var(--font-body-scale) * 1rem), 2vw, calc(var(--font-body-scale) * 1.5rem));
    line-height: 1.25;
    color: var(--color-black);
    margin: 0;

    p {
      line-height: 1.25;
      margin-bottom: 0;
    }
  }

  .image-with-positioned-text__button {
    color: var(--color-black);
    font-weight: 700;
    font-size: clamp(calc(var(--font-body-scale) * 1rem), 1vw + 0.5rem, calc(var(--font-body-scale) * 1.25rem));
    line-height: 1.25;
    display: inline-flex;
    text-decoration: none;
    height: auto;
    width: fit-content;
    margin: 0;

    &::after{
      background: var(--color-black);
    }

    &::before {
      height: 2px;
      background: var(--color-black);
      top: calc(100%);
    }
  }

  /* Right Image Wrapper */
  .image-with-positioned-text__image-wrapper {
    position: relative;
    @media screen and (max-width: 767px){
      max-width: 35rem;
      margin: 0 auto;
    }

    @media screen and (min-width: 768px) {
      flex: 1;
      padding: 0;
      order: 2;
    }
  }

  .image-with-positioned-text__picture {
    display: block;
    width: 100%;
    position: relative;
  }

  .image-with-positioned-text__image {
    width: 100%;
    height: auto;
    display: block;
  }

  .image-with-positioned-text__placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: #e5e5e5;
    display: flex;
    align-items: center;
    justify-content: center;

    svg {
      width: 50%;
      height: 50%;
      opacity: 0.3;
    }
  }

  /* Positioned Text Overlay */
  .image-with-positioned-text__positioned-text {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    top: var(--text-top-mobile, 50%);
    right: var(--text-right-mobile, 10%);
    transform: translateY(-50%);

    padding-top: clamp(2.3125rem, 4vw, 3.125rem);
    padding-left: clamp(0.4375rem, 1.5vw, 0.6875rem);

    border-left: 2px solid var(--color-black);
    z-index: 10;

    @media screen and (min-width: 768px) {
      top: var(--text-top-desktop, 50%);
      right: var(--text-right-desktop, 10%);
      gap: 0.5625rem;
    }

    p {
      margin: 0;
      font-size: clamp(calc(var(--font-body-scale) * 0.875rem), 2vw, calc(var(--font-body-scale) * 1.5rem));
      line-height: 1;
      color: var(--color-black);
      font-weight: 700;
    }
  }
}