.game-goodies-list {
  margin: 20px 0;
  border-radius: 10px;
  overflow: hidden;
  container-type: inline-size; 
  container-name: myContainer;
  width: 100%; 
  & .element {
    display: block;
    background-position: right center;
    background-repeat: no-repeat;
    background-color: #282828;
    & .content {
      padding: 15px 32px;
      min-height: 120px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      color: #fff;
    }
    & .header {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 8px;
    }
    & .title {
      font-size: 2rem;
      font-weight: bold;
      line-height: 1;
      line-clamp: 1; 
      -webkit-line-clamp: 1;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden; 
    }
    & .subtitle {
      font-size: 1.2rem;
      text-transform: uppercase;
      line-height: 1;
    }
    & .btn {
      font-size: 1.6rem;
      text-transform: uppercase;
      color: #fff;
      background-color: var(--main-color);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 6px 20px;
      min-width: 300px;
      max-width: 400px;
      & .svg-icon {
        width: 20px;
      }
    }
    & .price {
      font-size: 2rem;
      border-radius: 5px;
      padding: 5px 8px;
      background-color: var(--main-color);
      display: inline-flex;
      line-height: 1;
    }
    &.bet-element {
        & .price {
          background-color: #1c1c1c;
          border: 1px solid #737373;
          padding: 10px 20px;
          align-items: center;
          display: flex;
          flex-direction: column;
          gap: 4px;
          font-size: 1.2rem;
          text-transform: uppercase;
          border-radius: 18px;
          height: 100%;
          background-image: url('/img/stack-of-golden-casino-chips.png');
          background-repeat: no-repeat;
          background-position: center bottom 5px;
          & .value {
            font-size: 1.6rem;
            font-weight: bold;
            white-space: nowrap;
          }
        }
    }
    
  }
  .carousel-controls {
    & .carousel-control {
      position: absolute;
      top: 50%;
      bottom: auto;
      background-color: #161616;
      border: 1px solid #000;
      border-radius: 100%;
      width: 24px;
      aspect-ratio: 1 / 1;
      height: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0;
      transform: translateY(-50%);
      &.right {
        right: 5px;
      }
      &.left {
        left: 5px;
      }
      & .svg-icon {
        width: 14px;
      }
    }
    &:hover {
      opacity: 1;
    }
  }
}
@container myContainer (width <= 600px) { 
  .game-goodies-list {
    border-radius: 0;
    & .element {
      background-position: center center;
      background-size: cover;
      & .content {
        background: rgba(0, 0, 0, 0.3);
         backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        grid-template-columns: auto;
        grid-template-rows: auto auto;
        gap: 10px;
        & .header {
          order: 1;
        }
        & .btn {
          max-width: none;
          min-width: auto;
          width: 100%;
        }
        & .price {
          font-size: 1.2rem;
        }
        &:after {
          content: '';
          width: 100%;
          height: 100%;
          position: absolute;
          z-index: -1;
          filter: blur(8px);
        }
      }
      & .title {
        line-clamp: 2; 
        -webkit-line-clamp: 2;
      }
      &.bet-element {
        & .content {
          grid-template-columns: auto;
        }
        & .price {
          display: inline-flex;
          flex-direction: row;
          background-image: none;
          height: auto;
          padding: 5px 10px;
          & .value {
            font-size: 1.2rem;
          }
        }
      }  
    }    
  }
}