@tailwind components;

@layer components {
  .conversion-panel-gradient {
    background: linear-gradient(
      213deg,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0.05) 49.48%,
      rgba(255, 255, 255, 0.03) 100%
    );
    backdrop-filter: blur(12px);
  }

  .conversion-panel-underlay-gradient {
    background: url("data:image/svg+xml,%3Csvg width='100%25' height='77' viewBox='0 0 1248 77' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_f_5570_73984)'%3E%3Cpath d='M16 16H1232L1135.11 61H103.203L16 16Z' fill='url(%23paint0_linear_5570_73984)' /%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_f_5570_73984' x='0' y='0' width='100%25' height='77' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix' /%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape' /%3E%3CfeGaussianBlur stdDeviation='8' result='effect1_foregroundBlur_5570_73984' /%3E%3C/filter%3E%3ClinearGradient id='paint0_linear_5570_73984' x1='624' y1='16' x2='624' y2='61' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2356F5B3' /%3E%3Cstop offset='1' stop-color='%2356F5B3' stop-opacity='0' /%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  .inlined-centered-underlay {
    top: calc(100% - 12px);
  }

  .inline-centered-grid {
    grid-template-columns: 1fr 257px;
  }

  .offset-underlay {
    top: calc(100% - 12px);
  }

  .offset-image {
    transform: translateY(-5%);
  }

  .offset-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @screen sm {
    .inlined-centered-underlay {
      background-size: cover;
    }

    .offset-underlay {
      background-size: cover;
    }

    .offset-image {
      transform: translateY(-15%);
    }
  }

  @screen lg {
    .inlined-centered-underlay {
      top: calc(100% - 16px);
      width: calc(100% - 32px);
    }

    .offset-underlay {
      background-size: contain;
      top: calc(100% - 16px);
      width: 100%;
    }

    .offset-inner-wrapper {
      max-width: 590px;
    }

    .offset-image {
      max-width: 808px;
      transform: translate(10%, 0%);
    }
  }
}
