.container.promo-wrapper {
  --content-width: 1398px;
  margin-top: 40px;
  margin-bottom: 40px;
}
#aug-banner {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(../images/banner/back.webp);
  background-image: -webkit-image-set(url("../images/banner/back.webp") 1x, url("../images/banner/back@2x.webp") 2x);
}
#aug-banner p {
  margin: 0;
  padding: 0;
}
#aug-banner .banner-inner {
  width: 1368px;
  max-width: 100%;
  aspect-ratio: 1368 / 260;
}
#aug-banner .headline {
  top: 11.73%;
  left: 1.02%;
  width: 20.98%;
}
#aug-banner .offer {
  top: 0.77%;
  left: 23.39%;
  width: 51.39%;
}
#aug-banner .callout {
  top: 23.65%;
  right: 1.39%;
  width: 23.32%;
}
#aug-banner .button {
  font-size: 21.24px;
  background-color: #ffe40b;
  top: 70.19%;
  left: 39.77%;
  width: 19.62%;
  height: 19.42%;
  border-radius: 999px;
}
@supports (text-box: trim-both cap alphabetic) {
  #aug-banner .button > span {
    display: block;
    text-box: trim-both cap alphabetic;
  }
}
@media screen and (max-width: 1380px) {
  .container.promo-wrapper {
    --content-width: 1230px;
  }
  #aug-banner .button {
    font-size: 1.553vw;
  }
}
@media screen and (max-width: 991px) {
  .container.promo-wrapper {
    --content-width: 1230px;
  }
  #aug-banner .banner-inner {
    aspect-ratio: auto;
    width: 100%;
    max-width: 720px;
    min-height: 0;
    padding: 28px 0 32px;
  }
  #aug-banner .headline,
  #aug-banner .offer,
  #aug-banner .callout {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
    margin: 0 auto;
  }
  #aug-banner .headline {
    max-width: 39.8%;
    margin: 0 auto 14px auto;
  }
  #aug-banner .offer {
    max-width: 97.7%;
    margin: 0 auto 18px auto;
  }
  #aug-banner .callout {
    max-width: 44.2%;
    margin: 18px auto 0 auto;
  }
  #aug-banner .button {
    font-size: 21.24px;
    background-color: #ffe40b;
    position: static;
    width: 241px;
    height: 50.5px;
    margin: 0 auto;
  }
}
@media screen and (max-width: 767px) {
}
@media screen and (max-width: 567px) {
  #aug-banner {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../images/banner/back-m.webp);
    background-image: -webkit-image-set(url("../images/banner/back-m.webp") 1x, url("../images/banner/back-m@2x.webp") 2x);
  }
  .container.promo-wrapper {
    --content-width: 100%;
    padding-left: 14px;
    padding-right: 14px;
    margin-top: 24px;
    margin-bottom: 24px;
  }
  #aug-banner .banner-inner {
    width: 347.5px;
    max-width: 100%;
    min-height: 618px;
    padding: 0;
    aspect-ratio: auto;
  }
  #aug-banner .headline,
  #aug-banner .offer,
  #aug-banner .callout {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 0;
  }
  #aug-banner .headline {
    position: absolute;
    top: 2.5px;
    left: 14.82%;
    width: 66.19%;
    max-width: 66.19%;
    margin: 0;
    z-index: 2;
  }
  #aug-banner .offer {
    position: absolute;
    top: 148px;
    left: 7.48%;
    width: 84.6%;
    max-width: 84.6%;
    margin: 0;
    z-index: 2;
  }
  #aug-banner .callout {
    position: absolute;
    top: 447px;
    left: 3.88%;
    width: 93.38%;
    max-width: 93.38%;
    margin: 0;
    z-index: 3;
  }
  #aug-banner .button {
    font-size: 15.93px;
    background-color: #ffe40b;
    position: absolute;
    top: 409px;
    left: 23.74%;
    width: 52.09%;
    height: 38.5px;
    border-radius: 19.25px;
    margin: 0;
    z-index: 4;
  }
}