@use "../../../../styles/container_breakpoints.scss";
@use "../../../../styles/spacing.scss";

.container {
  --height: 125px;
  --top-padding: 0px;
  --bottom-padding: #{spacing.$spacing-4};
  --top-margin: #{spacing.$spacing-4};
  --bottom-margin: #{spacing.$spacing-2};

  display: grid;
  grid-template-rows: 1fr;
  height: calc(var(--height) + (2 * var(--top-padding)));
  align-items: flex-end;
  margin: var(--top-margin) 0 var(--bottom-margin) 0;
  padding: var(--top-padding) 0 var(--bottom-padding);

  @include container_breakpoints.container-at-least("sm") {
    --height: 141px;
    --top-padding: #{spacing.$spacing-4};
  }

  @include container_breakpoints.container-at-least("md") {
    --height: 265px;
    --gap: calc(#{spacing.$spacing-1} / 2);
  }  

  @include container_breakpoints.container-at-least("lg") {
    --top-margin: #{spacing.$spacing-5};
    --bottom-margin: #{spacing.$spacing-2};
    --gap: calc(#{spacing.$spacing-1});
  }
}