/* Mobile-first: stack full width */
.block-right {
  width: 100%;
  max-width: 768px;
  margin: 10px 0;
  float: none;              /* neutralize any theme float on mobile */
  display: block;           /* make sure it's a block */
}

/* Desktop+ */
@media (min-width: 768px) {
  .block-right {
    width: 30%;

    /* Works when parent is FLEX (pushes to the right) */
    margin-left: auto;

    /* Works when parent is GRID (aligns to right side) */
    justify-self: end;

    /* Works when parent is classic block layout */
    float: right;

    /* Tweak spacing from the left content if needed */
    margin-top: 0;
    margin-bottom: 10px;
    /* If you want a gap from the left column, use either margin-left or a gap on the parent */
  }
}

/* If there’s an image inside, keep it responsive */
.block-right img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Optional: clearfix for the block's immediate container IF it isn't flex/grid */
.cols::after,
.region-content .layout-container::after {
  content: "";
  display: block;
  clear: both;
}