.cta-banner {
  background: url(/wp-content/themes/infleet/assets/images/bannersImages/cta-01-bg-scaled.jpg) !important;
  border-radius: 16px !important;
  margin: 0px !important;
}

.container-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 70%) minmax(0, 1fr) !important;
  align-items: stretch !important; /* Stretch items to match row height */
}

.container-grid.inverted {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 70%) !important;
  align-items: stretch !important; /* Stretch items to match row height */
}

.banner-content {
  padding: 60px !important;
  display: flex !important;
  flex-direction: column !important;
  align-self: center !important;
}

.banner-content .bannerTitle {
  font-weight: 600 !important;
  font-family: "Inter", sans-serif !important;
  color: white !important;
}

.banner-content .bannerTitle strong {
  font-weight: 600 !important;
  background: #5591ff !important;
  padding: 0px 5px !important;
}

.bannerButton {
  align-self: start !important;
  background: #356efc !important;
  color: white !important;
  font-family: "Inter", sans-serif !important;
  text-decoration: none !important;
  padding: 10px 30px !important;
  border-radius: 8px !important;
  font-weight: 400 !important;
  transition: 0.2s linear !important;
}

.bannerButton:hover {
  align-self: start !important;
  background: #1f4df1 !important;
  color: white !important;
  font-family: "Inter", sans-serif !important;
  text-decoration: none !important;
  padding: 10px 30px !important;
  border-radius: 8px !important;
  font-weight: 400 !important;
  transition: 0.2s linear !important;
}

.banner-content .bannerText {
  font-family: "Inter", sans-serif !important;
  color: white !important;
  max-width: 65ch !important;
}

.banner-image {
  display: flex !important;
  align-items: stretch !important; /* ensures it matches the row height */
}

.grid-right {
  order: 1 !important;
}

.banner-image.grid-left {
  order: 0 !important;
}

.banner-image img {
  width: 100% !important;
  top: -30px !important;
  height: calc(100% + 30px) !important;
  object-fit: contain !important; /* or cover if you prefer */
  display: block !important;
  position: relative !important; /* ensure no offset */
}

.banner-image img.contain {
  width: 100% !important;
  top: -30px !important;
  height: calc(100% + 30px) !important;
  object-fit: contain !important; /* or cover if you prefer */
  display: block !important;
  position: relative !important; /* ensure no offset */
}

/* XS - Mobile Portrait (≤ 575px) */
@media (max-width: 575.98px) {
  .container-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important; /* Stretch items to match row height */
  }

  .container-grid.inverted {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important; /* Stretch items to match row height */
  }

  .banner-image {
    padding: 40px 40px 0px 40px !important;
  }

  .banner-image img {
    max-height: 300px !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: bottom !important;
    top: 0 !important;
  }

  .banner-image.grid-left {
    order: 2 !important;
  }
}

/* SM - Mobile Landscape and small phones (≥ 576px) */
@media (min-width: 576px) {
  .container-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important; /* Stretch items to match row height */
  }

  .container-grid.inverted {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important; /* Stretch items to match row height */
  }

  .banner-image {
    padding: 40px 40px 0px 40px !important;
  }

  .banner-image img {
    max-height: 300px !important;
    object-fit: contain !important;
    object-position: bottom !important;
    top: 0 !important;
  }

  .banner-image.grid-left {
    order: 2 !important;
  }
}

/* MD - Tablet Portrait (≥ 768px) */
@media (min-width: 768px) {
  .banner-image {
    padding: unset !important;
  }

  .container-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 70%) minmax(0, 1fr) !important;
    align-items: stretch !important; /* Stretch items to match row height */
  }

  .container-grid.inverted {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 70%) !important;
    align-items: stretch !important; /* Stretch items to match row height */
  }

  .banner-image img {
    max-height: unset !important;
    width: 100% !important;
    top: 0px !important;
    height: calc(100%) !important;
    object-fit: contain !important; /* or cover if you prefer */
    display: block !important;
    position: relative !important; /* ensure no offset */
    object-position: bottom !important;
  }

  .banner-image.grid-left {
    order: 0 !important;
  }
}

/* LG - Tablet Landscape / Small Laptops (≥ 992px) */
@media (min-width: 992px) {
  .banner-image img {
    width: 100% !important;
    top: -30px !important;
    height: calc(100% + 30px) !important;
    object-fit: contain !important; /* or cover if you prefer */
    display: block !important;
    position: relative !important; /* ensure no offset */
  }
}

/* XL - Desktops (≥ 1200px) */
@media (min-width: 1200px) {
  /* Styles for extra large screens */
}

/* XXL - Large desktops / Ultra-wide (≥ 1600px) */
@media (min-width: 1600px) {
  /* Styles for very large screens */
}