```css
/* Hide default Drupal dialog title */
.homepage-popup-dialog .ui-dialog-titlebar {
  display: none;
}

/* Main dialog container */
.homepage-popup-dialog.ui-dialog {
  width: auto !important;
  max-width: 700px !important;
  border-radius: 8px;
  overflow: hidden;
}

/* Dialog content */
.homepage-popup-dialog .ui-dialog-content {
  padding: 0 !important;
}

/* Popup wrapper */
.popup-wrapper {
  position: relative;
  display: flex;
  max-width: 700px;
  background: #3cb38b;
  border-radius: 8px;
  overflow: hidden;
}

/* Close button */
.popup-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;
  border: none;
  font-size: 28px;
  color: #fff;
  cursor: pointer;
  z-index: 10;
}

/* Image section */
.popup-image img {
  width: 260px;
  height: 100%;
  object-fit: cover;
}

/* Content section */
.popup-content {
  padding: 30px;
  background: #3cb38b;
  color: #fff;
  max-width: 440px;
  width: 100%;
  box-sizing: border-box;
}

/* Button */
.popup-button {
  display: inline-block;
  margin-top: 20px;
  background: #fff;
  color: #0073aa;
  padding: 10px 18px;
  border-radius: 20px;
  font-weight: 600;
  text-decoration: none;
}

/* Hover effect */
.popup-button:hover {
  background: #f2f2f2;
}

/* ===================== */
/* Mobile Responsive */
/* ===================== */

@media (max-width: 768px) {

  /* Dialog width fix */
  .homepage-popup-dialog.ui-dialog {
    width: 90vw !important;
    max-width: 90vw !important;
    left: 5% !important;
  }

  /* Stack layout */
  .popup-wrapper {
    flex-direction: column;
    max-width: 100%;
  }

  /* Image responsive */
  .popup-image img {
    width: 100%;
    height: 200px;
  }

  /* Content padding */
  .popup-content {
    max-width: 100%;
    padding: 20px;
    text-align: center;
  }

  /* Heading text smaller */
  .popup-content p:nth-child(2) {
    font-size: 1.6rem !important;
  }

  /* Button full width */
  .popup-button {
    display: block;
    width: 100%;
    text-align: center;
  }

}