$mdWidth: 1120px;

@function px-to-em($pixels, $base-font-size: 16) {
    @return #{calc($pixels / $base-font-size)}em;
  }
  
// Mixin for the grid container
@mixin grid-container {
    display: flex;
    flex-wrap: wrap;
    // gap: px-to-em(15);
    // margin-right: -#{px-to-em(15)}; // Adjust as needed
    // margin-left: -#{px-to-em(15)}; // Adjust as needed
}

// Mixin for grid columns

@mixin grid-column($columns: 12) {
  flex: 0 0 calc(100% / 12 * $columns);
  max-width: calc(100% / 12 * $columns);
  // padding-right: #{px-to-em(15)}; // Adjust as needed
  // padding-left: #{px-to-em(15)}; // Adjust as needed 
}

@mixin grid-column($columns: 12, $mdColumns: 12) {
    flex: 0 0 calc(100% / 12 * $columns);
    max-width: calc(100% / 12 * $columns);
    // padding-right: #{px-to-em(15)}; // Adjust as needed
    // padding-left: #{px-to-em(15)}; // Adjust as needed

    @media screen and (max-width: $mdWidth) {
      flex: 0 0 calc(100% / 12 * $mdColumns);
      max-width: calc(100% / 12 * $mdColumns);
    }
}

@mixin grid-flex-self-align($alignment) {
    align-self: $alignment;
}

@mixin grid-flex-align-items($horizontal, $vertical: top) {
    justify-content: $horizontal;
    align-items: $vertical;
}

@mixin auto-left() {
    margin-left: auto;
}

@mixin auto-right() {
    margin-right: auto;
}

@mixin center-container() {
    margin-left: auto;
    margin-right: auto;
}

@mixin customScrollbars($width: 10px, $trackColor: #f1f1f1, $thumbColor: #888) {
    /* WebKit (Safari/Chrome) */
    &::-webkit-scrollbar {
      width: $width;
    }
  
    &::-webkit-scrollbar-track {
      background: $trackColor;
    }
  
    &::-webkit-scrollbar-thumb {
      background: $thumbColor;
    }
  
    /* Firefox */
    &::-moz-scrollbar {
      width: $width;
    }
  
    &::-moz-scrollbar-track {
      background: $trackColor;
    }
  
    &::-moz-scrollbar-thumb {
      background: $thumbColor;
    }
  
    /* IE/Edge */
    &::-ms-scrollbar {
      width: $width;
    }
  
    &::-ms-scrollbar-track {
      background: $trackColor;
    }
  
    &::-ms-scrollbar-thumb {
      background: $thumbColor;
    }
  }

* {
	box-sizing: border-box;
}