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

.grid {
  --grid-gap: var(--spacing-md);

  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);

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

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