.bannerosobowe {background-image: url(../img/banery/BFGoodrich_3000x800px.jpg);  background-repeat: no-repeat;
  background-position: bottom;
  background-size: cover; height: 620px;}
.bannerdostawcze {background: linear-gradient(rgb(0, 0, 0), rgba(255, 255, 255, 0), transparent), url(../img/banery/dostawcze2016.webp) center;}
.bannerciezarowe {background: linear-gradient(rgb(0, 0, 0), rgba(255, 255, 255, 0), transparent), url(../img/banery/ciezarowe2016.webp) center;}
.bannerolnicze {background: linear-gradient(rgb(0, 0, 0), rgba(255, 255, 255, 0), transparent), url(../img/banery/rolnicze2016.webp) center;}
.bannerprzemyslowe {background: linear-gradient(rgb(0, 0, 0), rgba(255, 255, 255, 0), transparent), url(../img/banery/przemyslowe2016.webp) center;}
.bannerterenowe {background: linear-gradient(rgb(0, 0, 0), rgba(255, 255, 255, 0), transparent), url(../img/banery/terenowe2016.webp) center;}
.bannermotocyklowe {background: linear-gradient(rgb(0, 0, 0), rgba(255, 255, 255, 0), transparent), url(../img/banery/skuter2016.webp) center;}
.bannerwozki {background: linear-gradient(rgb(0, 0, 0), rgba(255, 255, 255, 0), transparent), url(../img/banery/wozki2016.webp) center;}
.bannerquady {background: linear-gradient(rgb(0, 0, 0), rgba(255, 255, 255, 0), transparent), url(../img/banery/quad2016.webp) center;}
.bannerskutery {background: linear-gradient(rgb(0, 0, 0), rgba(255, 255, 255, 0), transparent), url(../img/banery/skuter2016.webp) center;}
.bannerkosiarki {background: linear-gradient(rgb(0, 0, 0), rgba(255, 255, 255, 0), transparent), url(../img/banery/kosiarki2016.webp) center;}
.bannergokarty {background: linear-gradient(wrgb(0, 0, 0), rgba(255, 255, 255, 0), transparent), url(../img/banery/gokart2016.webp) center;}
.bannerglowna {background-image: url(../img/banery/Roadx-3000x800.jpg);  background-repeat: no-repeat;
  background-position: bottom;
  background-size: cover; height: 620px;}

.banner-buttons-carousel {
  display: flex;
  max-width: 1140px;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

.banner-button-item {
  display: flex;
  height: 63px;
  padding: 10px 8px;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 10px;
  flex: 1 0 0;
  border-right: 0.2px solid #494b4b;
  background: #fff;
  cursor: pointer;
  box-sizing: border-box;
}

.banner-button-item:first-of-type {
  border-left: 0.2px solid #494b4b;
}

.button-item-active {
  border-bottom: 2.5px solid #ff0000;
}

@media only screen and (max-width: 1200px) {
  .banner-buttons-carousel {
      max-width: 960px;
  }
}

@media only screen and (max-width: 992px) {
  .banner-buttons-carousel {
      max-width: 720px;
  }
}

@media only screen and (max-width: 768px) {
  .banner-buttons-carousel {
      max-width: 540px;
  }

  .banner-buttons-carousel {
      display: none !important;
  }

  .banner-buttons-carousel {
      overflow: hidden;
      display: flex;
      width: 100%;
      position: relative;
      justify-content: flex-start;
      padding-left: 5px;
      padding-right: 5px;
  }

  .banner-buttons-carousel .banner-button-item {
      min-width: 50%; /* Show 2 items at a time */
      flex: 0 0 50%;
      box-sizing: border-box;
      transition: transform 0.3s ease-in-out;
  }
}

@media only screen and (max-width: 576px) {
  .banner-buttons-carousel {
      padding-left: 15px;
      padding-right: 15px;
  }

  .bannerglowna {
      background-image: linear-gradient(black, black);
      height: auto;
  }

  .bannerosobowe {
      background-image: linear-gradient(black, black);
      height: auto;
  }
}