.one-api-container {
  width: 100%;
  height: 600px;
  aspect-ratio: 1440 / 640;
  overflow: hidden;
  display: flex;
  justify-content: center;
  background: linear-gradient(180deg, #FFF 55.39%, #D9D9D9 100%);
  padding-top: 60px;

  &.sports-container-render {
    height: 550px;
  }
  &.slots-container-render {
    min-height: 990px;
  }
  &.dealers-container-render {
    height: 660px;
  }
  &.fishings-container-render {
    height: 540px;
  }

  .one-api-content {
    width: 1440px;
    position: relative;
    text-align: center;

    .mask-gift-1 {
      position: absolute;
      width: 207.938px;
      height: 219.372px;
      aspect-ratio: 207.94/219.37;

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
    .mask-gift-2 {
      position: absolute;
      width: 339px;
      height: 366.397px;
      transform: rotate(-84.184deg);
      aspect-ratio: 339.00/366.40;
      right: -8%;
      top: 30%;
      filter: blur(8px);

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    .content-header {
      color: #2B49DB;
      font-size: 52px;
      font-weight: 800;
      line-height: 66px;
    }
    .content-info {
      color: #343434;
      text-align: center;
      font-family: Roboto;
      font-size: 20px;
      font-weight: 500;
      line-height: 32px;
      letter-spacing: 0.4px;
      margin: 12px 0 20px 0;
    }
    .categories-render {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      height: 40px;

      .category-button {
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 160px;
        height: 40px;
        border-radius: 40px;
        border: 2px solid #2B49DB;
        color: #2B49DB;

        font-weight: 500;
        font-size: 16px;
        transition: transform 0.3s ease;

        &:hover {
          transform: scale(1.05);
        }
        &.active {
          background: #2B49DB;
          color: #fff;
        }
      }
    }
    .default-render, .sports-render, .slots-render, .dealers-render, .fishings-render {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      max-width: 820px;
      margin: 40px auto 54px auto;
      row-gap: 16px;

      .logo {
        width: 120px;
        height: 48px;
        margin-left: 20px;

        &:nth-child(6n + 1) {
          margin-left: 0;
        }

        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
    }
  }
}

@media screen and (max-width: 1024px) {
  .one-api-container {
    height: 720px;
    padding-top: 50px !important;
    position: relative;

    &.sports-container-render {
      height: 580px;
    }
    &.slots-container-render {
      min-height: 1240px;
    }
    &.dealers-container-render {
      height: 800px;
    }
    &.fishings-container-render {
      height: 620px;
    }

    .one-api-content {
      text-align: center;

      .mask-gift-1 {
        width: 79.817px !important;
        height: 84.206px !important;
        aspect-ratio: 79.82/84.21 !important;
        left: -30px;
      }
      .mask-gift-2 {
        width: 104.65px !important;
        height: 113.108px !important;
        aspect-ratio: 104.65/113.11 !important;
        top: 80% !important;
        filter: blur(2.469628095626831px) !important;
      }

      .content-header {
        width: 280px;
        font-size: 24px !important;
        line-height: 127.26%;
        margin: auto;
      }
      .content-info {
        width: 320px;
        font-size: 13px !important;
        line-height: 20px; /* 153.846% */
        letter-spacing: 0.26px; 
        margin: auto;
        margin-top: 12px;
      }
      .categories-render {
        width: 320px;
        margin: 18px auto;
        height: unset;
        gap: 16px !important;
        
        .category-button {
          display: flex;
          font-size: 12px !important;
          min-width: 120px !important;
          height: 28px !important;
          justify-content: center;
          align-items: center;
        }
      }

      .default-render, .sports-render, .slots-render, .dealers-render, .fishings-render {
        justify-content: center;
        padding: 20px !important;
        margin: 0 !important;
        row-gap: 8px;

        .logo {
          width: 90px !important;
          height: 36px !important;
          aspect-ratio: 5/2;
          z-index: 10;

          &:nth-child(1), &:nth-child(3n + 1) {
            margin-left: 0;
          }
        }
      }

      .button-group {
        a {
          z-index: 10;
        }
      }
    }
  }
}