.image-banner {
  .image-banner__wrapper {
    position: relative;
    border-radius: 25px;
    overflow: hidden;
    background-color: rgb(var(--color-tertiary-badge));
    
    .image-banner__content {
      position: absolute;
      left: 48px;
      top: 53px;

      h2 {
        font-weight: 700;
        font-size: clamp(var(--sp-6d5), 2.5vw, var(--sp-8d5));
        line-height: 110%;
        letter-spacing: -0.02em;
        color: rgb(var(--color-base-secondary-button));

        @media screen and (max-width: 1023px) {
          line-height: 120%;
          color: rgb(var(--color-text-black));
        }
      }

      p {
        margin-top: 16px;
        font-size: clamp(var(--sp-3d5), 2.5vw, var(--sp-4));
        line-height: 150%;
        color: rgb(var(--color-text-white));

        @media screen and (max-width: 1023px) {
          line-height: 140%;
          margin-top: 14px;
          color: rgb(var(--color-secondary-text));
        }
      }

      a {
        display: flex;
        margin-top: 27px;
        border: 1px solid rgb(var(--color-additional-border));
        border-radius: 8px;
        box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
        background: #fff;
        font-weight: 500;
        font-size: 16px;
        line-height: 150%;
        color: rgb(var(--color-text-dark));
        width: fit-content;
        padding: 11px 24px;

        @media screen and (max-width: 1023px) {
          margin-top: 14px;
        }
      }

      @media screen and (max-width: 1023px) {
        position: relative;
        left: 0;
        top: 0;
        padding: 25px 20px 32px;
        background-color: rgb(var(--color-tertiary-badge));
        max-width: unset;
      }
    }

    .image-banner__overlay {
      position: absolute;
      width: 100%;
      height: 100%;
      display: block;
      background-color: rgb(var(--color-base-text));
      top: 0;
      left: 0;
    }
  }

  &.image-banner-v2 {
    @media screen and (max-width: 767px) {
      padding-left: 0;
      padding-right: 0;
    }

    .image-banner__wrapper {
      @media screen and (max-width: 767px) {
        border-radius: 0;
      }
      .image-banner__content {
        position: absolute;
        left: 56px;
        top: 80px;

        @media screen and (max-width: 1023px) {
          background-color: unset;
          top: unset;
          padding: var(--sp-5) var(--sp-5) var(--sp-10);
          left: 0;
          bottom: 0px;
        }
  
        h2 {
          font-size: clamp(var(--sp-6d5), 2.5vw, var(--sp-8));
          line-height: 1.3;
          color: rgb(var(--color-base-secondary-button));
        }
  
        p {
          margin-top: var(--sp-3d5);
          color: rgb(var(--color-base-secondary-button));
  
          @media screen and (max-width: 1023px) {
            margin-top: var(--sp-3);
          }
        }
  
        a {
          margin-top: var(--sp-7d5);
  
          @media screen and (max-width: 1023px) {
            margin-top: var(--sp-3);
          }
        }
      }

      picture {
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }
}