@import 'https://unpkg.com/open-props' layer(design.system);
/* @import 'https://unpkg.com/open-props/normalize.dark.min.css'
  layer(demo.support); */


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200..700&display=swap');

:root {
  font-family: 'Inter', sans-serif;

  --nav-block-size: var(--size-10);

  --op-brand-0: oklch(61% 0.21 258);
  --op-brand-1: oklch(72% 0.28 332);

  --op-card-gradient: radial-gradient(
      farthest-corner circle var(--gradient-center) in oklch,
      var(--op-brand-1) 0%,
      
    )
    no-repeat border-box border-box var(--op-brand-0);

  --custom-radius: 8px;
  --surface-1: var(--gray-9);
  
}




.btn1-custom {
  background-color: inherit;
  color: var(--text-1);
  border: var(--border-size-1) solid currentColor;
  padding: var(--size-2) var(--size-4);
  border-radius: var(--radius-5);
  transition: background-color 0.2s ease;
  &:hover {
    background-color: oklch(100% 0 0 / 4.8%);
  }
}




  

.hero-content {
  display: grid;
  gap: var(--gap);

  flex: 1;
}

.cards {
  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(28ch, 1fr));
  gap: var(--gap);

  & h3 {
    font-size: var(--font-size-3);
  }

  .card {
    border: var(--border-size-1) solid currentColor;
    padding: calc(var(--gap) * 0.75);
    border-radius: var(--custom-radius);
    display: grid;
    gap: calc(var(--gap) / 2);
    align-content: start;



    transition: background 0.3s ease-in-out;

    --gradient-center: at 115.047px 111.562px;

    &:hover {
      background: radial-gradient(
          farthest-corner circle var(--gradient-center) in oklch,
          var(--op-brand-1) 0%,
          oklch(72% 0.28 332 / 0%) calc(0% + 200px)
        )
        no-repeat border-box border-box var(--op-brand-0);
    }
  }

  .head {
    display: flex;
    justify-content: space-between;
  }
}