.d4iro-headline-large,
.d4iro-headline-medium,
.d4iro-title-large,
.d4iro-label-large {
  line-height: 1;
  margin: auto;
}

.d4iro-headline-large {
  font-size: 20px;
  font-weight: 900;
}
@media (width >= 992px) {
  .d4iro-headline-large {
    font-size: 36px;
  }
}

.d4iro-headline-medium {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.d4iro-title-large {
  font-size: 16px;
  font-weight: 820;
}
@media (width >= 992px) {
  .d4iro-title-large {
    font-size: 20px;
  }
}

.d4iro-label-large {
  font-size: 16px;
  font-weight: 700;
}

.d4iro-image-container {
  width: 100%;
  height: 100%;
}
.d4iro-image-container picture {
  display: flex;
  width: 100%;
  height: 100%;
}
.d4iro-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.d4iro-cards-widget {
  --card-width: min(100% - 30px, 380px);
  --card-gap: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--card-gap);
  margin: auto auto var(--card-gap);
  width: min(100%, var(--card-width) * 5);
}
@media (width >= 992px) {
  .d4iro-cards-widget {
    --card-width: 300px;
  }
}
.d4iro-cards-widget .d4iro-card {
  position: relative;
  flex: 0 1 var(--card-width);
  padding: 25px;
  box-sizing: border-box;
  background: linear-gradient(to bottom, rgba(107, 7, 146, 0.4) 0%, rgba(45, 0, 58, 0.4) 100%);
  backdrop-filter: blur(4px);
  border-radius: 16px;
  text-align: center;
  color: #fff;
  display: grid;
  grid-template: auto auto 1fr auto/1fr;
  gap: 20px 0;
}
.d4iro-cards-widget .d4iro-card--highlighted {
  color: #FDD23B;
}
.d4iro-cards-widget .d4iro-card--highlighted::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 4px;
  background: linear-gradient(to bottom, #FFD12E, #9A1C86);
  mask: linear-gradient(#fff 0%, #fff 100%) content-box, linear-gradient(#fff 0%, #fff 100%);
  mask-composite: exclude;
  mask-composite: destination-out;
  box-sizing: border-box;
  animation: sliding-gradient 0.5s linear alternate infinite;
  pointer-events: none;
}
.d4iro-cards-widget .d4iro-card .d4iro-title-large {
  line-height: 1.2;
}
.d4iro-cards-widget .d4iro-card .d4iro-label-large {
  line-height: 1.3;
}
.d4iro-cards-widget .d4iro-card .d4iro-image-container--unclear-what {
  margin: 15px auto;
  width: 180px;
  height: 180px;
}

.d4iro-section-hero {
  position: relative;
  width: min(100%, 1900px);
  margin: auto;
  padding: min(40px, 2.4vmax) 0;
  background-image: url("./section-hero-bg-992w-CWIB8ARl.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@media (width >= 992px) {
  .d4iro-section-hero {
    background-image: url("./section-hero-bg-1920w-jeCxXC73.webp");
  }
}
.d4iro-section-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, #0A147A 0%, transparent 30px), linear-gradient(to top, #0A147A 0%, transparent 30px);
}
@media (width >= 992px) {
  .d4iro-section-hero::before {
    background: linear-gradient(to bottom, #0A147A 0%, transparent 100px), linear-gradient(to top, #0A147A 0%, transparent 100px), linear-gradient(to right, #0A147A 0%, transparent 100px), linear-gradient(to left, #0A147A 0%, transparent 100px);
  }
}
.d4iro-section-hero__body {
  position: relative;
  z-index: 1;
  width: min(100% - var(--layout-padding), 600px);
  margin: auto;
}
@media (width >= 1200px) {
  .d4iro-section-hero__body {
    width: min(100% - var(--layout-padding), 1300px);
  }
}

.d4iro-section-gates {
  position: relative;
  width: min(100%, 1900px);
  margin: auto;
  padding: min(40px, 2.4vmax) 0;
  background-image: url("./section-gates-bg-992w-XwQFGiJs.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@media (width >= 992px) {
  .d4iro-section-gates {
    background-image: url("./section-gates-bg-1920w-DbUKU1l4.webp");
  }
}
.d4iro-section-gates::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, #0A147A 0%, transparent 30px), linear-gradient(to top, #0A147A 0%, transparent 30px);
}
@media (width >= 992px) {
  .d4iro-section-gates::before {
    background: linear-gradient(to bottom, #0A147A 0%, transparent 100px), linear-gradient(to top, #0A147A 0%, transparent 100px), linear-gradient(to right, #0A147A 0%, transparent 100px), linear-gradient(to left, #0A147A 0%, transparent 100px);
  }
}
.d4iro-section-gates__body {
  position: relative;
  z-index: 1;
  width: min(100% - var(--layout-padding), 700px);
  margin: auto;
}

.d4iro-section-cards {
  position: relative;
  width: min(100%, 1900px);
  margin: auto;
  padding: min(40px, 2.4vmax) 0;
  background-image: url("./section-cards-bg-992w-DryADZ6F.webp");
  background-repeat: no-repeat;
  background-position: center top;
}
@media (width >= 992px) {
  .d4iro-section-cards {
    background-size: contain;
    background-image: url("./section-cards-bg-1920w-Bma4MSxd.webp");
  }
}
.d4iro-section-cards::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, #0A147A 0%, transparent 30px), linear-gradient(to top, #0A147A 0%, transparent 30px);
}
@media (width >= 992px) {
  .d4iro-section-cards::before {
    background: linear-gradient(to bottom, #0A147A 0%, transparent 100px), linear-gradient(to top, #0A147A 0%, transparent 100px), linear-gradient(to right, #0A147A 0%, transparent 100px), linear-gradient(to left, #0A147A 0%, transparent 100px);
  }
}
.d4iro-section-cards__body {
  position: relative;
  z-index: 1;
  margin: auto;
}

.d4iro-section-prizes .d4iro-headline-large {
  margin-bottom: min(20px, 1.2vmax);
  padding: 0 15px;
  line-height: 1.3;
  text-align: center;
  color: #fff;
}

.d4iro-section-accordion {
  max-width: 700px;
  margin: 10px auto;
  padding: 0 15px;
}
.d4iro-section-accordion__item {
  margin-bottom: 10px;
  transition: box-shadow 0.3s ease;
}
.d4iro-section-accordion__summary {
  text-align: center;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  color: #ffffff;
  padding: 12px 30px 12px 0;
  list-style: none;
  outline: none;
  width: fit-content;
  margin: auto;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABwSURBVHgB7ZDRCYAwDAUzSkfoRnUER3AT3awjOEKM0EoIgUbNV8nB+zLeQQGCIFBBxINWacVwu9BO2g5W2g+dMpB3Klih4zyKCPl9m+ENSmRj39ZfchGpPNL2PMtnOYskEeHyBB4oET+5EvGXB8HkXBIG5M0feONQAAAAAElFTkSuQmCC");
  background-repeat: no-repeat;
  background-position: center right;
}
.d4iro-section-accordion__content {
  padding: 10px 16px;
  line-height: 1.5;
  color: #ffffff;
  box-shadow: 0 0 0 1px inset #ffffff;
  border-radius: 16px;
}

.d4iro-gates-gem {
  width: fit-content;
  margin: auto;
}
.d4iro-gates-gem .d4iro-image-container {
  position: relative;
  z-index: 1;
  margin: auto;
  max-width: min(200px, 30vw);
  transform: translateY(10%);
  filter: brightness(1) saturate(1);
  animation: flashFromTime 3.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}
.d4iro-gates-gem .d4iro-image-container img {
  animation: floatUpDown 4.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
}
.d4iro-gates-gem__body {
  display: grid;
  place-content: center;
  padding: min(30px, 1.8vmax);
  text-align: center;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(4px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.d4iro-gates-gem__body .d4iro-headline-large,
.d4iro-gates-gem__body .d4iro-title-large {
  margin-bottom: min(10px, 0.6vmax);
  color: #050F81;
}
.d4iro-gates-gem__body .d4iro-button {
  margin: min(15px, 0.9vmax) auto 0;
}
@keyframes flashFromTime {
  0% {
    filter: brightness(1) saturate(1);
  }
  65% {
    filter: brightness(1) saturate(1);
  }
  85% {
    filter: brightness(1.6) saturate(1.4);
  }
  100% {
    filter: brightness(1) saturate(1);
  }
}
@keyframes floatUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(12px);
  }
}

.d4iro-button {
  --c-signup-button-color: white;
  --c-signup-button-background: linear-gradient(45deg, #A815ED 0%, #EF008F 100%);
  display: grid;
  place-content: center;
  letter-spacing: 0.5px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  appearance: none;
  border: none;
  margin: auto;
  text-decoration: none;
  font-weight: 700;
  color: var(--c-signup-button-color);
  padding: 0 30px;
  width: fit-content;
  height: 48px;
  border-radius: 48px;
  font-size: 14px;
  background: var(--c-signup-button-background);
}
@media (width >= 992px) {
  .d4iro-button {
    font-size: 20px;
  }
}
.d4iro-prizes-list {
  overflow: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  width: fit-content;
  max-width: 100%;
  margin: auto;
  display: flex;
  text-align: center;
}
.d4iro-prizes-list__item {
  scroll-snap-align: center;
  width: min(33%, 200px);
  min-width: 200px;
  padding: 20px 10px;
  display: grid;
  border-style: solid;
  border-color: transparent;
}
.d4iro-prizes-list__item:not(:first-child, :last-child) {
  border-left-width: 2vw;
  border-right-width: 2vw;
}
.d4iro-prizes-list__item:first-child {
  border-left-width: 4vw;
  border-right-width: 2vw;
}
.d4iro-prizes-list__item:last-child {
  border-left-width: 2vw;
  border-right-width: 4vw;
}
.d4iro-prizes-list__item .d4iro-image-container--prizes-list {
  margin: 0 auto 15px;
  width: 160px;
  height: 160px;
}
.d4iro-prizes-list__item .d4iro-label-large {
  color: #fff;
  line-height: 1.3;
}

.d4iro-payment-brands {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 6px;
  justify-content: center;
  width: min(100%, 620px);
  margin: 20px auto 40px;
}
.d4iro-payment-brands__item {
  flex: 0 0 60px;
  padding: 5px 10px;
  border-radius: 9px;
  background-color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(3px);
}
.d4iro-payment-brands .d4iro-image-container--payment-brands {
  width: 100%;
  margin: auto;
  max-width: 60px;
  aspect-ratio: 3/2;
  vertical-align: top;
}

.d4iro-hero-bonuses {
  width: 100%;
  margin: auto;
}
.d4iro-hero-bonuses__body {
  display: grid;
  place-content: center;
  padding: min(30px, 1.8vmax);
  text-align: center;
  background-color: rgba(23, 0, 87, 0.2);
  backdrop-filter: blur(7px);
  border-radius: 16px;
  border: 3px solid #0083FF;
}
.d4iro-hero-bonuses__body .d4iro-headline-large,
.d4iro-hero-bonuses__body .d4iro-title-large {
  margin-bottom: min(10px, 0.6vmax);
  color: #FFCD1A;
}
.d4iro-hero-bonuses__body .d4iro-button {
  margin: min(15px, 0.9vmax) auto 0;
}

.d4iro-hero-container {
  display: grid;
  grid-template-rows: auto auto auto;
  grid-template-columns: minmax(min(100%, 85px), 0.3fr) 1fr;
  grid-template-areas: "texts texts" "paw girl" "bonuses bonuses";
  gap: 0;
  width: 100%;
  height: 100%;
}
@media (width >= 1200px) {
  .d4iro-hero-container {
    grid-template-rows: auto auto auto;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: ". texts girl" "paw bonuses girl" ". . girl";
  }
}
.d4iro-hero-container__paw {
  grid-area: paw;
  transform: translate(5%, -10%);
}
@media (width >= 1200px) {
  .d4iro-hero-container__paw {
    position: relative;
    z-index: 2;
    max-width: 180px;
    max-height: 180px;
    transform: translate(15%, 5%);
    pointer-events: none;
  }
}
.d4iro-hero-container__paw .d4iro-image-container--bonus-paw img {
  object-fit: contain;
}
.d4iro-hero-container__texts {
  grid-area: texts;
  text-align: center;
}
@media (width >= 1200px) {
  .d4iro-hero-container__texts {
    text-align: left;
  }
}
.d4iro-hero-container__texts .d4iro-headline-large {
  margin-bottom: min(10px, 0.6vmax);
  line-height: 1.2;
  text-transform: uppercase;
  color: #02F7FF;
}
.d4iro-hero-container__texts .d4iro-title-large {
  margin-bottom: min(30px, 1.8vmax);
  line-height: 1.2;
  color: #fff;
}
.d4iro-hero-container__bonuses {
  grid-area: bonuses;
  position: relative;
  z-index: 1;
  margin: -50px 0 -30px;
}
@media (width >= 1200px) {
  .d4iro-hero-container__bonuses {
    margin: 0;
  }
}
.d4iro-hero-container__girl {
  grid-area: girl;
}
@media (width >= 1200px) {
  .d4iro-hero-container__girl {
    width: min(38vw, 560px);
    height: min(38vw, 560px);
    transform: translate(-12%, 11%);
  }
}

.d4iro-welcome-de-eur {
  --layout-padding: 30px;
  width: 100%;
  padding: min(10px, 0.6vmax) 0 min(80px, 4.8vmax);
  background-color: #0A147A;
  font-family: Montserrat, serif;
}
@media (width >= 992px) {
  .d4iro-welcome-de-eur {
    --layout-padding: 120px;
  }
}