
.ad-flex-block {
    display: flex;
    flex-direction: row;        /* DEFAULT (LARGE SCREENS): Arranges items side-by-side */
    justify-content: center;    /* Centers items horizontally */
    align-items: center;        /* Vertically centers items */
    gap: 2rem;                  /* Space between image and text block */
    background-color: #121212;
    color: #f1f1f1;
    border-radius: 12px;
    overflow: hidden;           /* Contains inner floats if any, good practice */
    font-family: 'Inter', sans-serif;
    padding: 2rem;
    max-width: 900px;           /* Max width for the entire block on large screens */
    width: 100%;                /* Allows block to shrink on smaller screens */
    box-sizing: border-box;     /* Includes padding in width calculation */
  }

.ad-brandimg-wrapper {
            flex: 0 0 auto;           /* Prevents shrinking/growing beyond content on large screens */
            max-width: 200px;         /* Max width for image column on large screens */
            width: 100%;
      }

 .ad-content-wrapper {
            display: flex;                  /* Inner flex for vertical alignment of text elements */
            flex-direction: column;
            align-items: center;
            text-align: center;
            flex: 1;                        /* Allows text block to take remaining space on large screens */
            min-width: 300px;               /* Minimum width for text block before wrapping */
            max-width: 600px;               /* Max width for text block readability */
  }

  .ad-main-img {
        width: 100%;          /* Image fills its wrapper */
        height: auto;         /* CRUCIAL: Image always scales proportionally */
        object-fit: cover;    /* Keep object-fit: cover if you want it to always cover its space,
                                 it won't crop unless its container gets a fixed aspect ratio. */
        display: block;
        /* Remove the fixed height: 250px; that was here */
    }



  /* Media Query for small screens (stacking behavior) */
  @media (max-width: 768px) { /* Adjust this breakpoint as needed (e.g., 640px or 576px) */
    .ad-flex-block {
      flex-direction: column !important; /* CRUCIAL: Stack vertically on small screens */
      align-items: center !important;    /* Center items horizontally when stacked */
      gap: 1.5rem !important;            /* Adjust gap for vertical stacking */
      padding: 1rem !important;          /* Reduce padding on small screens */
    }

    /* Image container sizing for stacking */
    .ad-flex-block .ad-image-wrapper {
      width: 100% !important;            /* Image wrapper takes full width */
      max-width: 400px !important;       /* Constrain max width of image in stack if desired */
    }

    /* Main image sizing for stacking */
   .ad-flex-block .ad-main-img {
        width: 100% !important;
        height: auto !important; /* This !important now becomes redundant but harmless */
        object-fit: cover !important; /* This !important now becomes redundant but harmless */
    }

    /* Text content wrapper sizing for stacking */
    .ad-flex-block .ad-content-wrapper {
      width: 100% !important;            /* Text block takes full width */
      min-width: unset !important;       /* Remove min-width to allow shrinking */
      padding: 0 1rem !important;        /* Optional: add some padding to text block */
    }
  }
  