﻿.bnrSHJ25 {
  height: var(--bnrHeight);
  display: grid;
  overflow: hidden;
  grid-template-areas: ".... main ....";
  grid-template-columns: 0 1fr 0;
  grid-template-rows: 1fr;
  --gridBannerCoverAll: 1 / 1 / 2 / 5;
  --widthBannerColumnMain: var(--cont-max-width);
  --bnrWrapMargin: 0 auto 0 auto;
  --bnrCardMarginTop: 12px;
  --TLsize: 28px;
  --TLmargin: 1rem 0 .3rem 0;
  --TLlineHeight: .9;
  --TXsize: 35px;
  --TXlineHeight: 1.4;
  --tHtTextStyleColor: rgb(255, 184, 28);
  --tHtTextStyleWhiteSpace: nowrap;
  --cHtCardGridTemplateAreas:
  		"titl"
  		"medi"
  		"cont"
  		"foot" ;
  --cHtCardGridRows: auto 200px 1fr auto;
  --cHtCardWidth: auto;
  --cHtImageHeight: 100%;
  --cHtCardMediaOffsetTop: .2rem;
  --cHtCardMediaOffsetBottom: -.2rem;
  --cHtCardMarginInline: .2rem;
  --cHtCardPaddingInline: .5rem;
  --cHtTextSkewGridColumns: auto 1fr;
  --cHtTextSkewSecondaryAlign: left;
  --cHtTextSkewMargin: -.5rem auto 0 auto;
  --BTN-margin: 1.5rem auto 0 auto;
  --BTN-width: 100%;
  --BTN-color-HOVER: var(--color-brand-main);
  --BTN-background-color-HOVER: white;
  --BTN-line-height: 1;
  --tHtTextStyleLineHeight: .8;
  --rdlSRAposition: absolute;
  --rdlSRAbase: 8px;
  --rdlSRAtop: 310px;
  --rdlSRAleft: 52px;
  --cCTposition: absolute;
  --cCTzIndex: 100;
  --cCTtop: 90px;
  --cCTbaseSize: 7px;
  --cCTCountdownRoundelBase: 1.6em;
  --thisFirstHtCardWidth: 170px;
}
.bnrSHJ25 .c-btn--ht {
  line-height: 1;
}
.bnrSHJ25__area {
  display: flex;
  text-align: center;
  position: relative;
}
.bnrSHJ25__area--main {
  grid-area: main;
  align-items: center;
  z-index: 50;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  overflow: scroll;
  margin-bottom: 0;
}
.bnrSHJ25__area--main .cHtCard {
  flex: 1;
}
.bnrSHJ25__area--main .cHtCard:nth-of-type(2) {
  margin-top: var(--bnrCardMarginTop);
}
.bnrSHJ25__area--main .cHtCard:nth-of-type(3) {
  margin-top: calc(var(--bnrCardMarginTop) * 2);
}
.bnrSHJ25__area--main .cHtCard:nth-of-type(4) {
  margin-top: calc(var(--bnrCardMarginTop) * 3);
}
.bnrSHJ25__area--background {
  grid-area: var(--gridBannerCoverAll);
  background: radial-gradient(ellipse at center center, var(--color-brand-main) 0%, #10142b 100%);
}
.bnrSHJ25__wrap {
  display: flex;
  margin: var(--bnrWrapMargin);
  width: 100%;
  flex-wrap: nowrap;
  position: relative;
  padding-inline: 10px;
  padding-top: 30px;
  padding-bottom: 30px;
  box-sizing: border-box;
}
.bnrSHJ25 .cHtCard {
  flex: 0 0 240px;
  min-width: 240px;
}
.bnrSHJ25 .cHtCard:nth-of-type(1) {
  flex: 0 0 var(--thisFirstHtCardWidth);
  min-width: 0;
}
.bnrSHJ25 .cHtCard--spacer {
  flex: 0 0 5px;
  min-width: 0;
  margin: 0;
}
.bnrSHJ25 h2 {
  font-weight: 900;
  text-transform: uppercase;
  color: white;
  font-size: var(--TLsize);
  line-height: var(--TLlineHeight);
  margin: var(--TLmargin);
}
.bnrSHJ25 .bnrTL {
  display: block;
}
.bnrSHJ25 p {
  font-size: var(--TXsize);
  line-height: var(--TXlineHeight);
  margin: var(--TXmargin);
}
.bnrSHJ25 .cHtTextGrid {
  --tHtTextStyleColor: rgb(255, 220, 142);
  --tHtTextStyleLineHeight: .9 ;
}
.bnrSHJ25 .cHtCard__area--footer {
  padding: 0;
}
@media (min-width: 470px) {
  .bnrSHJ25 {
    --rdlSRAleft: 46px;
  }
}
@media screen and (max-width: 680px) {
  .bnrSHJ25 {
    --widthBannerColumnMain: var(--cont-max-width);
  }
  .bnrSHJ25 .cHtCard:nth-of-type(3) {
    box-sizing: content-box;
    border-right: 15px solid transparent;
  }
}
@media screen and (min-width: 680px) {
  .bnrSHJ25 {
    --cHtImageSkewOffset: 70px;
  }
  .bnrSHJ25 .cHtCard {
    flex: 1;
  }
  .bnrSHJ25 .cHtCard:nth-of-type(1) {
    flex: 0 0 var(--thisFirstHtCardWidth);
  }
  .bnrSHJ25__area--main {
    width: auto;
    overflow: visible;
    padding-right: 20px;
  }
}
@media (min-width: 768px) {
  .bnrSHJ25 {
    grid-template-columns: 1fr var(--widthBannerColumnMain) 1fr;
    --bnrHeight: 530px;
    --cHtCardGridRows: auto 220px 1fr auto;
    --TXsize: 40px;
    --bnrWrapMargin: 0 auto -1.8rem auto;
    --tHtTextStyleLineHeight: .9;
    --cHtCardMediaOffsetBottom: .4rem;
    --cHtTextSkewMargin: -1rem auto 0 auto;
  }
  .bnrSHJ25 .cHtCard__area--footer {
    padding: var(--cHtCardPaddingInline);
  }
}
@media (min-width: 992px) {
  .bnrSHJ25 {
    --TLsize: 44px;
    --TXsize: 44px;
    --cHtCardPaddingInline: 1rem;
    --BTN-margin: 1rem auto 0 auto;
    --bnrWrapMargin: 0 auto -2.2rem auto;
    --cHtTextSkewMargin: -1.2rem auto 0 auto;
    --rdlSRAbase: 10px;
    --rdlSRAleft: 60px;
    --rdlSRAtop: 362px;
    --cCTtop: 95px;
    --cCTbaseSize: 8.5px;
    --cCTCountdownRoundelBase: 1.6em;
  }
  .bnrSHJ25 .c-btn br {
    display: none;
  }
}
@media (min-width: 1200px) {
  .bnrSHJ25 {
    --bnrHeight: 650px;
    --cHtCardGridRows: auto 300px 1fr auto;
    --TLsize: 47px;
    --thisFirstHtCardWidth: 200px;
    --rdlSRAbase: 10px;
    --rdlSRAleft: 70px;
    --rdlSRAtop: 430px;
    --cCTtop: 100px;
    --cCTbaseSize: 9.5px;
    --cCTCountdownRoundelBase: 1.8em;
  }
}
@media (min-width: 1400px) {
  .bnrSHJ25 {
    --TLsize: 54px;
    --TXsize: 60px;
    --cHtCardMarginInline: .4rem;
    --thisFirstHtCardWidth: 240px;
    --rdlSRAbase: 11px;
    --rdlSRAleft: 100px;
    --rdlSRAtop: 460px;
    --cCTtop: 100px;
    --cCTleft: 40px;
    --cCTbaseSize: 10px;
    --cCTCountdownRoundelBase: 2em;
  }
}
