.mayolove-container-paddings {
  padding: 0 var(--mayolove-spacing-sm);
}

@media (min-width: 768px) {
  .mayolove-container-paddings {
    padding: 0 var(--mayolove-spacing-md);
  }
}

@media (min-width: 1170px) {
  .mayolove-container-paddings {
    padding: 0;
  }
}

/**
 * Headline with Yellow Bar Component
 *
 * A reusable headline style with a decorative yellow bar to the right.
 * Used across Content, Course Dates, Accordion, FAQ, Content Banner, and Media widgets.
 * Yellow bar is hidden on mobile and shown from tablet (768px) upwards.
 */
.mayolove-headline-with-bar__text {
  margin: 0;
  color: var(--mayolove-color-blue);
  font-family: var(--mayolove-font-family);
  font-size: var(--mayolove-font-size-h2);
  font-weight: var(--mayolove-font-weight-bold);
  line-height: var(--mayolove-line-height-h2);
}

.mayolove-headline-with-bar__bar-container {
  display: none;
}

@media (min-width: 768px) {
  .mayolove-headline-with-bar {
    display: flex;
    gap: 20px;
    align-items: flex-end;
  }

  .mayolove-headline-with-bar__bar-container {
    display: block;
    width: 118px;
    padding-bottom: 7px;
    flex-shrink: 0;
  }

  .mayolove-headline-with-bar__bar {
    background-color: var(--mayolove-color-secondary);
    height: 4px;
    width: 100%;
  }
}