@media (min-width: 1322px) {
  .gifts-grid {
    grid-template-columns: repeat(4, 310px);
    grid-auto-rows: 342px;
    column-gap: 12px;
    row-gap: 12px;
  }

  .scroll-btn {
    display: none;
  }
}

@media (max-width: 1322px) {
  .gifts-grid {
    width: 99%;
    grid-template-columns: repeat(3, 310px);
    grid-auto-rows: 342px;
    column-gap: calc((98vw - 1100px) / 2);
    row-gap: 12px;
    justify-content: center;
  }

  .scroll-btn {
    display: none;
  }
}

@media (max-width: 1148px) {
  .gifts-grid {
    width: 99%;
    grid-template-columns: repeat(3, 310px);
    grid-auto-rows: 342px;
    column-gap: calc((98vw - 960px) / 2);
    row-gap: 12px;
  }
}

@media (max-width: 996px) {
  .gifts-grid {
    width: 99%;
    grid-template-columns: repeat(2, 310px);
    grid-auto-rows: 342px;
    column-gap: calc((98vw - 740px));
    row-gap: 12px;
  }
}

@media (max-width: 768px) {
  .scroll-btn {
    position: fixed;
    display: none;
    align-items: center;
    justify-content: center;
    right: 5px;
    bottom: 5px;
    width: 56px;
    height: 56px;
    background-color: #ffffff;
    border: 1px solid #ff4646;
    border-radius: 100px;
  }

  .scroll-btn__flex {
    display: flex;
  }
}

@media (max-width: 764px) {
  .gifts-grid {
    width: 99%;
    grid-template-columns: repeat(2, 310px);
    grid-auto-rows: 342px;
    column-gap: calc((98vw - 650px));
    row-gap: 12px;
  }
}

@media (max-width: 672px) {
  .gifts-grid {
    width: 99%;
    grid-template-columns: repeat(2, 310px);
    grid-auto-rows: 342px;
    column-gap: calc((98vw - 630px));
    row-gap: 12px;
  }
}

@media (max-width: 672px) {
  .gifts-grid {
    width: 99%;
    grid-template-columns: repeat(2, 310px);
    grid-auto-rows: 342px;
    column-gap: calc((98vw - 630px));
    row-gap: 12px;
  }
}

@media (max-width: 672px) {
  .gifts-grid {
    width: 99%;
    grid-template-columns: 310px;
    grid-auto-rows: 342px;
    row-gap: 12px;
  }
}

@media (max-width: 501px) {
  .categories {
    width: 94%;
    min-width: 354px;
  }

  .category {
    margin: 0px;
    padding: 12px 7px;
  }

  .gifts-header {
    width: 96%;
    min-width: 364px;
  }

  .gift-title {
    margin-top: 12px;
  }
}