.section-audio {
  display: flex;
  align-items: center;
}

.gds-grid {
  max-width: 1280px;
  justify-content: flex-start;
  display: flex;
  padding: 0 5px;
  margin: 0 auto;
  width: 100%;
  flex-flow: row wrap
}

@media screen and (min-width: 768px) {
  .gds-cell--m-three-quarters {
    width: 60%;
    margin-bottom: 0;
  }
}

@media screen and (min-width: 768px) {
  .gds-cell--m-quarter {
    width: 40%;
    margin-bottom: 0;
  }
}

.section-reference {
  display: inline-flex;
  float: right;
}

.gds-link--with-icon span:first-child {
  margin-right: 10px;
}

.bc-player-default_default .vjs-control-bar {
  background-color: #ffff !important;
}

.first {
  position: relative;
  bottom: 25%;
  left: 7%;
}

.section-audio {
  display: flex;
  align-items: center;
  gap: 10%;
  margin-bottom: 10%;
}

.section-text p {
  font-size: var(--typography-heading-s-font-size);
  line-height: var(--typography-heading-s-line-height);
  font-weight: var(--typography-heading-s-font-weight);
  font-family: var(--typography-heading-s-font-family);
  color: var(--color-gray-80);
  margin-bottom: var(--spacer-m);
}

.first span {
  font-size: var(--typography-descriptor-font-size);
  line-height: var(--typography-descriptor-line-height);
  font-weight: var(--typography-descriptor-font-weight);
  font-family: var(--typography-descriptor-font-family);
}

.audio-container {
  position: relative;
}

.node-6 .vjs-quality-menu-button,
.node-6 .vjs-picture-in-picture-control,
.node-6 .vjs-mute-control,
.node-6 .vjs-current-time,
.node-6 .vjs-progress-control,
.node-6 .vjs-time-divider,
.node-6 .vjs-duration-display,
.node-6 .vjs-current-time-display {
  display: none !important;
}

.node-6 .video-js {
  background: #fff;
  max-height: none !important;
  border: 3px solid #f58a68;
  outline: 10px solid #f5cdb9 !important;
  box-shadow: 0 0 0 20px #f5cdb966;
  width: 76px;
  height: 76px;
}

.video-js img {
  width: 36px;
  height: 36px;
}

/* Ensure button is clickable on mobile */
.node-6 .vjs-play-control {
  width: 100%;
  height: 100%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  position: relative;
}

.vjs-control-bar img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none; /* Ensures clicks go to button, not image */
}

@media screen and (min-width: 768px) {
  .section-image-audio {
    width: 50% !important;
    margin-bottom: 0;
  }
}

@media screen and (min-width: 768px) {
  .section-text-audio {
    width: 40% !important;
    margin-bottom: 0;
  }
}

.section-audio span {
  font-size: var(--typography-descriptor-font-size);
  line-height: var(--typography-descriptor-line-height);
  font-weight: var(--typography-descriptor-font-weight);
  font-family: var(--typography-descriptor-font-family);
}

.section-audio .audio-symbol:first-child {
  margin-top: 3% !important
}

/* Mobile-specific styles */
@media (max-width: 767px) {
  .section-text-audio.gds-cell.gds-cell--m-quarter .audio-symbol {
    padding-left: 15px;
  }

  .section-text-audio.gds-cell.gds-cell--m-quarter {
    padding: 0px 15px !important;
  }

  .audio-container .section-image img {
    width: 100%;
    max-width: 365px;
    height: auto;
  }

  /* Adjust .first positioning for mobile */
  .first {
    position: relative;
    bottom: 0;
    left: 0;
    margin-top: 20px;
  }

  /* Ensure adequate touch target size */
  .node-6 .video-js {
    min-width: 76px;
    min-height: 76px;
  }

  .section-audio {
    gap: 15px;
    margin-bottom: 20px;
  }
}