/* ===== Tablet (768px–1151px): Image as background ===== */
@media screen and (min-width: 768px) and (max-width: 1151px) {
  .promo_component_section {
    flex-direction: column;
    align-items: center;
    background-color: transparent;
    position: relative;
    overflow: hidden;
    padding: 20px !important;
  }

  .promo_image {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .promo_image picture,
  .promo_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .promo_content {
    border-radius: 20px;
    padding: 32px;
    width: 100%;
    max-width: 600px;
    z-index: 1;
  }
}

/* ===== Mobile (<768px): Stack image on top ===== */
@media screen and (max-width: 767px) {
  .promo_button_container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px !important;
  }

  .promo_content {
    padding: 16px !important;
    margin-top: 0 !important;
  }

  .promo_component_section {
    flex-direction: column !important;
    padding: 0 !important;
  }

  .promo_image {
    order: -1 !important; /* Image appears first */
    width: 100%;
  }

  .promo_image img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .promo_content {
    padding: 24px 0;
  }

  .promo_image img {
    height:100% !important;
  }
}


@media screen and (min-width: 1024px) and (max-width: 1024px){
   .promo_image img {
    max-width: 112% !important;
    height:100% !important;
    width: 150% !important;
  }

}

@media screen and (min-width: 912px) and (max-width: 912px){
   .promo_image img {
    max-width: 107% !important;
    height:100% !important;
    width: 150% !important;
  }

}

@media screen and (min-width: 1280px) and (max-width: 1280px){
   .promo_content {
    flex: 0 0 56% !important;
}
}

@media screen and (min-width: 820px) and (max-width: 853px){
    .promo_image img {
    max-width: 102% !important;
    height:100% !important;
    width: 150% !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 1151px){
  .promo_button_container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px !important;
  }

  .promo_component_section {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    overflow: hidden;
  }

  .promo_image {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .promo_image img {
    height:100% !important;
    width: 150% !important;
  }

  .promo_image picture,
  .promo_image img {
    width: 150%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .promo_content {
    position: relative;
    z-index: 1;
    padding: 24px !important;
    margin: 0 !important;
    border-radius: 20px;
    max-width: 600px;
    width: 100%;
  }
}

.promo_component_section {
    border-radius: 30px;
    border: 1px solid var(--Color-Graphite-Dark, #D3D6DC);
    background: #FFFFFF;
    display: flex;
    flex-direction: row;
    color : #003B71 !important;
    /* Elevation/Z1 */
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.04);
}
 
.promo_title {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
}
 
.promo_button_container {
    margin-top: 24px;
}
 
.promo_description {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
 
.promo_content {
    padding: 32px;
    margin-top: 30px;
    margin-bottom: 23px;
    flex: 0 0 56.8%;
}
 
.promo_image {
    flex: 0 0 50%;
    box-sizing: border-box;
}
 
.promo_image img {
   width: 100%;
   max-width: 100%;
   object-fit: contain;
   display: block;
}
 
.promo_button_container {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.promo_button_container a {
   background-color: #ffffff !important;
   color: #0074AD !important;
}

.promo_component_section a.button {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}