.my-cic-story-content-container {
  width: 100%;
  margin-bottom: 2rem;
}
.my-cic-story-content-containe {
  width: 100%;
}
.my-cic-story-content-title,
.my-cic-story-content-subheading,
.my-cic-story-content-legal {
  display: flex;
  width: 100%;
  margin: 0 auto;
  max-width: 70rem;
  padding: 1rem;
  justify-content: center;
}
.my-cic-story-content-subheading,
.my-cic-story-content-title,
.my-cic-story-content-legal {
  flex-direction: column;
}
.my-cic-story-content-row {
  display: grid;
  align-items: center;
  align-content: space-between;
  grid-template-columns: 1fr 2fr;
  width: 100%;
  margin: 0 auto;
  max-width: 70rem;
  padding: 1rem;
  gap: 1rem;
}
.my-cic-story-content-content {
}
.my-cic-story-content-icon {
}
.my-cic-story-content-info {
  flex: 1;
}
.my-cic-story-content-buttons {
  display: flex;
  width: 100%;
  margin: 0 auto;
  max-width: 70rem;
  padding: 1rem;
  justify-content: center;
  gap: 2rem;
}
/* Circle video */
.my-cic-story-content-icon{
  inline-size: clamp(300px, 28vw, 340px); /* responsive diameter */
  aspect-ratio: 1 / 1;                    /* perfect square */
  border-radius: 50%;
  overflow: hidden;                        /* mask the video */
  position: relative;
  flex: 0 0 auto;                          /* don’t stretch in flex/grid */
}

/* Make the video fill the circle */
.my-cic-story-content-icon video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;       /* crop to circle without distortion */
  object-position: center; /* adjust focal point if needed */
}

/* Optional: white ring + brand outline (tweak or remove) */
.my-cic-story-content-icon::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow:
    0 0 0 4px #fff,      /* inner white ring */
    0 0 0 6px #7a0c0c1a; /* subtle outer outline (adjust color) */
  pointer-events: none;
}

/* (Optional) mobile stack spacing */
@media (max-width: 768px){
  .my-cic-story-content-icon{ margin: 0 auto 1rem; }
}
@media only screen and (max-width: 768px) {
  .my-cic-story-content-row {
    display: flex;
    flex-direction: column;
  }
  .video-background {
    height: 40vh !important;
  }
}
@media only screen and (max-width: 600px) {
  .my-cic-story-content-row {
    display: flex;
    flex-direction: column;
  }
  .video-background {
    height: 24vh !important;
  }
  .my-cic-story-content-buttons {
    gap: 1rem;
    flex-direction: column;
  }
}