.home-tile {
  border: 1px solid rgb(50, 50, 50);
  border-radius: 6px;
  position: relative;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 10px;
  background-color: transparent;
  padding: 12px;
  height: 200px;
  width: 275px;
  transition: transform 200ms ease-in;
}

.home-tile::before {
  border-radius: 6px;
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  background-color: transparent;
  z-index: -1;
  box-sizing: content-box;
  height: 100%;
  transition:
    width 300ms cubic-bezier(0.7, 0.12, 0.28, 0.82),
    background-color 0ms linear 300ms,
    transform 200ms ease-in;
  width: 0%;
}

.home-tile > div > div:last-child {
  transition:
    color 200ms linear 100ms,
    transform 200ms cubic-bezier(0.1, 0.77, 0.82, 0.88) 200ms;
  color: rgb(150, 150, 150);
}

.home-tile > div > div:first-child {
  transition:
    color 200ms linear 100ms,
    transform 200ms cubic-bezier(0.1, 0.77, 0.82, 0.88) 100ms;
}
.home-tile:hover::before {
  background-color: #f97316;
  width: 100%;
  transition:
    width 300ms cubic-bezier(0.7, 0.12, 0.28, 0.82),
    background-color 200ms cubic-bezier(0.1, 0.77, 0.82, 0.88);
  transform: scale(1.05);
}

.home-tile:hover {
  transform: scale(1.05);
}

.home-tile:hover > div > div:last-child {
  color: rgb(240, 240, 240);
}

.home-tile:hover > div > div {
  transform: translateX(6px);
}

.home-tile:hover > img {
  width: 80px;
}
.home-tile > img {
  transition: width 200ms linear 100ms;
}

@media (min-width: 768px) {
  .home-tile {
    gap: 14px;
    height: 275px;
    width: 375px;
  }
}

.title {
  font-family: "Grenze Gotisch", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.button-linear:hover {
  background: linear-gradient(to right, #fb923c, #ea580c);
}

.button-linear-inv {
  background: linear-gradient(to right, #fb923c, #ea580c);
}

.button-linear-inv:hover {
  background: linear-gradient(to right, #00000000, #00000000);
}

.bg-promocje-linear {
  background: linear-gradient(to bottom, #171717, #000000);
}

.shadow-linear-1 {
  background: linear-gradient(to right, #000000 0%, #00000000 50%);
}

.shadow-linear-2 {
  background: linear-gradient(to top, #000000, #00000000 30%);
}

@media (min-width: 768px) {
  #bg-img {
    transform: translateY(40px);
  }
}

@keyframes img-scale {
  0% {
    scale: 120%;
    transform: translateY(40px);
  }
  100% {
    scale: 105%;
    transform: translateY(40px);
  }
}

.img-scale-animation {
  animation: img-scale 5s ease-in-out 0s forwards;
}

.prom1 {
  transition: all 750ms ease-out 0ms;
}

.prom2 {
  transition: all 750ms ease-out 100ms;
}

.prom3 {
  transition: all 750ms ease-out 200ms;
}

.prom-hover:hover {
  scale: 1.05;
  background-color: #404040;
}

.prom1,
.prom2,
.prom3,
.menu-box {
  transform: translateY(75px) scale(0.8);
}