@use "@styles/abstracts/mixins" as mix;

%grid {
  display: grid;
  align-items: center;
  grid-template-columns:
    minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
    var(--column-3, minmax(0, 1fr));
  column-gap: var(--grid-gap, var(--spacing-md));

  @include mix.media("screen") {
    @include mix.dimensions("md") {
      grid-template-columns:
        minmax(0, 1fr) clamp(60ch, 60vw, 80ch)
        var(--column-3, minmax(0, 3fr));
      column-gap: var(--grid-gap, var(--spacing-xl));
    }

    @include mix.dimensions("lg") {
      grid-template-columns:
        minmax(0, 1fr) clamp(47ch, 47vw, 80ch)
        var(--column-3, minmax(0, 1fr));
    }
  }
}