@media (max-width: 768px) {
  .jackpot {
    display: grid !important;
    grid-template-columns: 100px 1fr 1fr !important;
    grid-template-rows: 1fr 1fr 1fr !important;
    grid-template-areas:
      "logo grand grand"
      "logo major major"
      "logo minor mini" !important;
    column-gap: 10px !important;
    row-gap: 8px !important;
    padding: 10px !important;  
    box-sizing: border-box !important;
    align-items: stretch !important;
    font-size: 15px !important;
  }
  .jackpot__logo-wrapper {
    grid-area: logo !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
  }
  .jackpot__logo { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: contain !important; 
  }
  .jackpot__double { display: contents !important; }
  .jackpot [class*="grand"] { grid-area: grand !important; }
  .jackpot [class*="major"] { grid-area: major !important; }
  .jackpot [class*="minor"] { grid-area: minor !important; }
  .jackpot [class*="mini"]  { grid-area: mini  !important; }
  .jackpot .jackpot__value--zebra       { grid-area: grand !important; }
  .jackpot .jackpot__value--major-zebra { grid-area: major !important; }
  .jackpot .jackpot__value--minor-zebra { grid-area: minor !important; }
  .jackpot .jackpot__value--mini-zebra  { grid-area: mini  !important; }
  .jackpot__value {
    height: 100% !important;   
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  .jackpot__value span {
    font-size: 15px !important;
    line-height: 1.2 !important;
  }
  .jackpot__value--minor-7 span,
  .jackpot__value--mini-7 span,
  .jackpot__value--minor-gold span,
  .jackpot__value--mini-gold span,
  .jackpot__value--minor-zebra span,
  .jackpot__value--mini-zebra span {
    font-size: 12px !important;
  }
  .jackpot__value--grand-gold span:after, 
  .jackpot__value--grand-gold span:before {
    height: 20px !important;
    margin-top: -8px !important;
    width: 20px !important;
  }
  .jackpot__value--grand-7 span:after, 
  .jackpot__value--grand-7 span:before {
    height: 20px !important;
    margin-top: -9px !important;
    width: 20px !important;
  }
  .jackpot__value--zebra span:after, 
  .jackpot__value--zebra span:before {
    height: 20px !important;
    margin-top: -8px !important;
    width: 20px !important;
  }
  .jackpot__value.half { width: 100% !important; }
  .jackpot, .jackpot__double, .jackpot__value { flex: unset !important; }
}
@media (max-width: 768px) {
  .container:has(.jackpot) .swiper-wrapper {
    display: block !important;
    transform: none !important;
    transition: none !important;
    width: 100% !important;
  }
  .container:has(.jackpot) .swiper-slide {
    width: 100% !important;
    margin: 0 0 16px 0 !important;
  }
}
@media (max-width: 768px) {
  .container:has(.jackpot) {
    --jp-collapsed-h: 190px;
    --jp-label-size: 12px;
    --jp-chip-height: 36px;
    --jp-chip-height-open: 18px;
    --jp-chip-bottom: 8px;
    --jp-chip-radius: 10px;
    --jp-blur: 4px;
    --jp-slide-time: 1.3s;
    --jp-ease: cubic-bezier(.22,.7,.1,1);
    --jp-shift-y: -6px;
    --jp-closed-lift: 6px;
  }
  .container:has(.jackpot) .swiper {
    position: relative !important;
    overflow: hidden !important;
    max-height: var(--jp-collapsed-h) !important;
    transition: max-height var(--jp-slide-time) var(--jp-ease) !important;
    cursor: pointer !important;
  }
  .container:has(.jackpot) .swiper::before {
    content: "" !important;
    position: absolute !important;
    left: 0; right: 0;
    bottom: var(--jp-shift-y) !important;
    height: calc(var(--jp-chip-height) + var(--jp-chip-bottom) + 15px) !important;
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.00) 0%,
      rgba(0,0,0,0.15) 35%,
      rgba(0,0,0,0.35) 65%,
      rgba(0,0,0,0.75) 100%
    ) !important;
    
backdrop-filter: blur(var(--jp-blur)) !important;
    -webkit-backdrop-filter: blur(var(--jp-blur)) !important;
    z-index: 2 !important;
    pointer-events: none !important;
    border-radius: 8px !important;
    transition:
      opacity var(--jp-slide-time) var(--jp-ease),
      height  var(--jp-slide-time) var(--jp-ease) !important;
  }
  .container:has(.jackpot) .swiper::after {
    content: "Genişletmek için tıklayınız" !important;
    position: absolute !important;
    left: 50% !important; transform: translateX(-50%) !important;
    bottom: calc(var(--jp-chip-bottom) + var(--jp-shift-y) + var(--jp-closed-lift)) !important;
    height: var(--jp-chip-height) !important;
    line-height: var(--jp-chip-height) !important;
    padding: 0 14px !important;
    font-size: var(--jp-label-size) !important;
    color: #f2f2f2 !important;
    background: rgba(0,0,0,0.35) !important;
    backdrop-filter: blur(var(--jp-blur)) !important;
    -webkit-backdrop-filter: blur(var(--jp-blur)) !important;
    border-radius: var(--jp-chip-radius) !important;
    z-index: 3 !important;
    pointer-events: none !important;
    white-space: nowrap !important;
    transition:
      height var(--jp-slide-time) var(--jp-ease),
      line-height var(--jp-slide-time) var(--jp-ease),
      opacity var(--jp-slide-time) var(--jp-ease) !important;
  }
  .container[data-jp-open]:has(.jackpot) .swiper {
    max-height: 1000vh !important;
  }
  .container[data-jp-open]:has(.jackpot) .swiper::before {
    opacity: 0 !important;
    height: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .container[data-jp-open]:has(.jackpot) .swiper::after {
    content: "Küçültmek için tıklayınız" !important;
    bottom: calc(var(--jp-chip-bottom) + var(--jp-shift-y)) !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    height: auto !important;
    line-height: normal !important;
    opacity: 1 !important;
  }
}