.h-grid {
  display: grid;
}

  @media all and (min-width: 769px) {

  .h-grid--ratio25 {
      grid-template-columns: 1fr 2fr !important
  }
    }

  @media all and (min-width: 769px) {

  .h-grid--ratio75 {
      grid-template-columns: 2fr 1fr !important
  }
    }

  @media all and (min-width: 769px) {

  .h-grid--two-columns {
      grid-template-columns: repeat(2, 1fr)
  }
    }

  @media all and (min-width: 769px) {

  .h-grid--three-columns {
      grid-template-columns: repeat(3, 1fr)
  }
    }

  @media all and (min-width: 769px) {

  .h-grid--four-columns {
      grid-template-columns: repeat(2, 1fr)
  }
    }

  @media all and (min-width: 1025px) {

  .h-grid--four-columns {
      grid-template-columns: repeat(4, 1fr)
  }
    }

  @media all and (min-width: 1201px) {

  .h-grid--fixed-288px-auto {
      grid-template-columns: 18rem 1fr
  }
    }

  @media all and (min-width: 1201px) {

  .h-grid--fixed-324px-auto {
      grid-template-columns: 1fr 20.25rem
  }
    }

  @media all and (min-width: 769px) {

  .h-grid--fixed-300px-width {
      grid-template-columns: repeat(auto-fit, minmax(18.75rem, 18.75rem))
  }
    }

  @media all and (min-width: 1201px) {

  .h-grid--fixed-393px-auto {
      grid-template-columns: 24.5625rem 1fr
  }
    }

  @media all and (min-width: 1201px) {

  .h-grid--fixed-498px-auto-auto {
      grid-template-columns: 1fr 1fr
  }
    }

  @media all and (min-width: 1681px) {

  .h-grid--fixed-498px-auto-auto {
      grid-template-columns: 31.125rem 1fr 1fr
  }
    }

  @media all and (min-width: 1201px) {

  .h-grid--fixed-498px-auto-auto > *:first-child {
        grid-column: 1 / -1
    }
      }

  @media all and (min-width: 1681px) {

  .h-grid--fixed-498px-auto-auto > *:first-child {
        grid-column: 1
    }
      }

  @media all and (min-width: 1201px) {

  .h-grid--fixed-auto-500 {
      grid-template-columns: auto 31.25rem
  }
    }

  .h-grid--auto-columns {
    display: flex;
    flex-wrap: wrap;
  }

  .h-grid--gap-10 {
    gap: 0.625rem;
  }

  .h-grid--gap-20 {
    gap: 1.25rem;
  }

  .h-grid--gap-30 {
    gap: 1.25rem;
  }

  @media all and (min-width: 769px) {

  .h-grid--gap-30 {
      gap: 1.875rem
  }
    }

  .h-grid--gap-40 {
    gap: 1.25rem;
  }

  @media all and (min-width: 769px) {

  .h-grid--gap-40 {
      gap: 1.875rem
  }
    }

  @media all and (min-width: 1025px) {

  .h-grid--gap-40 {
      gap: 2.5rem
  }
    }

  .h-grid--gap-50 {
    gap: 1.875rem;
  }

  @media all and (min-width: 769px) {

  .h-grid--gap-50 {
      gap: 3.125rem
  }
    }

  .h-grid--gap-60 {
    gap: 3.125rem;
  }

  @media all and (min-width: 769px) {

  .h-grid--gap-60 {
      gap: 3.125rem
  }
    }

  @media all and (min-width: 1025px) {

  .h-grid--gap-60 {
      gap: 3.75rem
  }
    }

  .h-grid--border .h-grid__item {
      border-bottom: 0.0625rem solid var(--color-greyscale-5);
    }