@media screen and (min-width: 1200px) {
  .small-banner {
    margin-top: calc(120 / 1920 * 100vw - 120 / 1920 * var(--scrollbar-size-px));
    margin-bottom: calc(160 / 1920 * 100vw - 160 / 1920 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 1200px) and (min-width: 1920px) {
  .small-banner {
    margin-top: 120px;
  }
}

@media screen and (min-width: 1200px) and (min-width: 1920px) {
  .small-banner {
    margin-bottom: 160px;
  }
}

@media screen and (max-width: 1199px) {
  .small-banner {
    margin-top: calc(40 / 375 * 100vw - 40 / 375 * var(--scrollbar-size-px));
    margin-bottom: calc(40 / 375 * 100vw - 40 / 375 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 1200px) {
  .small-banner .small-banner-wrap {
    display: flex;
    justify-content: center;
    gap: calc(20 / 1366 * 100vw - 20 / 1366 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 1200px) and (min-width: 1366px) {
  .small-banner .small-banner-wrap {
    gap: 20px;
  }
}

@media screen and (max-width: 1199px) {
  .small-banner .small-banner-wrap {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: calc(16 / 375 * 100vw - 16 / 375 * var(--scrollbar-size-px));
  }
}

.small-banner .small-banner-wrap a {
  display: block;
  width: calc(450 / 1366 * 100vw - 450 / 1366 * var(--scrollbar-size-px));
}

@media screen and (min-width: 1366px) {
  .small-banner .small-banner-wrap a {
    width: 450px;
  }
}

@media screen and (max-width: 1199px) {
  .small-banner .small-banner-wrap a {
    width: calc(330 / 375 * 100vw - 330 / 375 * var(--scrollbar-size-px));
  }
}

.small-banner .small-banner-wrap a img {
  width: 100%;
}

@media screen and (min-width: 1200px) {
  .summer-sale-banner {
    margin-top: calc(80 / 1920 * 100vw - 80 / 1920 * var(--scrollbar-size-px));
    margin-bottom: calc(40 / 1920 * 100vw - 40 / 1920 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 1200px) and (min-width: 1920px) {
  .summer-sale-banner {
    margin-top: 80px;
  }
}

@media screen and (min-width: 1200px) and (min-width: 1920px) {
  .summer-sale-banner {
    margin-bottom: 40px;
  }
}

@media screen and (max-width: 1199px) {
  .summer-sale-banner {
    margin-top: calc(30 / 375 * 100vw - 30 / 375 * var(--scrollbar-size-px));
    margin-bottom: calc(40 / 375 * 100vw - 40 / 375 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 1200px) {
  .summer-sale-banner .summer-banner {
    width: 46vw;
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (max-width: 1199px) {
  .summer-sale-banner .summer-banner {
    width: calc(260 / 375 * 100vw - 260 / 375 * var(--scrollbar-size-px));
    margin-inline: auto;
  }
}

.summer-sale-banner .summer-banner a {
  display: block;
}

.summer-sale-banner .summer-banner a img {
  width: 100%;
}

.summer-sale-banner .button-wrapper {
  display: flex;
}

@media screen and (min-width: 1200px) {
  .summer-sale-banner .button-wrapper {
    justify-content: center;
    margin-top: calc(60 / 1920 * 100vw - 60 / 1920 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 1200px) and (min-width: 1920px) {
  .summer-sale-banner .button-wrapper {
    margin-top: 60px;
  }
}

@media screen and (max-width: 1199px) {
  .summer-sale-banner .button-wrapper {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: calc(30 / 375 * 100vw - 30 / 375 * var(--scrollbar-size-px));
  }
}

.summer-sale-banner .common__button {
  background-color: black;
  display: inline-block;
}

@media screen and (min-width: 1200px) {
  .summer-sale-banner .common__button {
    width: calc(256 / 1920 * 100vw - 256 / 1920 * var(--scrollbar-size-px));
    height: calc(61 / 1920 * 100vw - 61 / 1920 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 1200px) and (min-width: 1920px) {
  .summer-sale-banner .common__button {
    width: 256px;
  }
}

@media screen and (min-width: 1200px) and (min-width: 1920px) {
  .summer-sale-banner .common__button {
    height: 61px;
  }
}

@media screen and (max-width: 1199px) {
  .summer-sale-banner .common__button {
    width: calc(210 / 390 * 100vw - 210 / 390 * var(--scrollbar-size-px));
    height: calc(43 / 390 * 100vw - 43 / 390 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 1200px) {
  .summer-sale-banner .common__button:not(:first-of-type) {
    margin-left: calc(60 / 1920 * 100vw - 60 / 1920 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 1200px) and (min-width: 1920px) {
  .summer-sale-banner .common__button:not(:first-of-type) {
    margin-left: 60px;
  }
}

@media screen and (max-width: 1199px) {
  .summer-sale-banner .common__button:not(:first-of-type) {
    margin-top: calc(30 / 375 * 100vw - 30 / 375 * var(--scrollbar-size-px));
  }
}

.summer-sale-banner .common__button a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: white;
  font-weight: bold;
}

@media screen and (min-width: 1200px) {
  .summer-sale-banner .common__button a {
    font-size: calc(16 / 1920 * 100vw - 16 / 1920 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 1200px) and (min-width: 1920px) {
  .summer-sale-banner .common__button a {
    font-size: 16px;
  }
}

@media screen and (max-width: 1199px) {
  .summer-sale-banner .common__button a {
    font-size: calc(13 / 390 * 100vw - 13 / 390 * var(--scrollbar-size-px));
  }
}