/* Main Content Block */
#pk_flex_content .flex_layout.dealerkaart {
  max-width: 100%;
  position: relative;
  background: url('./bg-pattern.png') center center;
  overflow: hidden;
  padding: 0 20px;
}

.dealerkaart .grid {
  gap: 20px;
}

.dealerkaart .layout-top {
  position: relative;
  z-index: 5;
  padding: 40px;
  gap: 0;
}
.dealerkaart .layout-top .content-left,
.dealerkaart .layout-top .content-right {
  grid-column: 1/13;
}
.dealerkaart .layout-top .content-left h2 {
  color: var(--white);
}
.dealerkaart .layout-top .payoff {
  display: none;
}

.dealerkaart .bg-box {
  max-width: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 0 20px 50px;
  height: 100%;
  overflow: hidden;
}
.dealerkaart .bg-box .box-inner {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background: var(--orange);
}

/* Layout bottom */
.dealerkaart .layout-bottom {
  position: relative;
  min-height: 714px;
  border-radius: 24px;
  background: url('./dealerkaart.png') bottom right no-repeat;
  background-size: cover;
  overflow: hidden;
  z-index: 5;
}
.dealerkaart .layout-bottom .content-wrapper {
  position: relative;
  padding-top: 10vw;
  color: var(--white);
  grid-column: 1 / 13;
  z-index: 5;
}
.dealerkaart .layout-bottom * {
  color: var(--white);
}
.dealerkaart .layout-bottom h3 {
  margin-bottom: 24px;
}
.dealerkaart .layout-bottom a {
  margin-top: 32px;
}
.dealerkaart .overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 4px 20px 10px #00000008;
  background: linear-gradient(180deg, #1c1c1c 0%, rgba(28, 28, 28, 0) 100%);
}

/* Tablet Styles */
@media screen and (min-width: 768px) {
  .dealerkaart .bg-box {
    max-width: 50%;
    padding-left: 20px;
  }

  .dealerkaart .layout-top {
    padding: 70px 40px 64px;
  }

  .dealerkaart .layout-top .content-left {
    grid-column: 1/7;
  }

  .dealerkaart .layout-top .content-right {
    grid-column: 8/12;
  }

  .dealerkaart .layout-top .payoff {
    display: block;
  }

  .dealerkaart .layout-bottom .content-wrapper {
    padding-top: 80px;
    grid-column: 2 / 6;
  }

  .dealerkaart .layout-bottom {
    background: url('./dealerkaart.png') center center no-repeat;
    background-size: cover;
  }
}