.r-position--left {
  justify-content: flex-start;
  align-self: flex-start;
  align-items: flex-start;
  text-align: start;
}
.r-position--center, .r-position--center-center {
  justify-content: center;
  align-self: center;
  align-items: center;
  text-align: center;
}
.r-position--right {
  justify-content: flex-end;
  align-self: flex-end;
  align-items: flex-end;
  text-align: end;
}
.r-position--center-left {
  justify-content: center;
  align-items: flex-start;
  text-align: start;
}
.r-position--center-right {
  justify-content: center;
  align-items: flex-end;
  text-align: end;
}

/* stylelint-disable keyframes-name-pattern, custom-property-pattern, scss/percent-placeholder-pattern */
/*
.default-transition {
    @include transition-as(color, red, blue);
}
.transition-with-custom-modifier {
    @include transition-as(color, red, orange, active);
}
.transition-with-super-custom-modifier {
    @include transition-as(color, red) {
        body:has(.selector) & {
            color: green;
        }
    }
}
*/
.r-how-to__image-wrapper, .r-how-to .r-vimeo__controls, .r-how-to__image {
  grid-row-start: 1;
  grid-column-start: 1;
  position: relative;
}

.r-how-to__pro-tip, .r-how-to__body-text {
  font-weight: 300;
  font-family: var(--font-primary);
  word-wrap: break-word;
  line-height: 1.2;
}
.r-how-to__pro-tip, .r-how-to__body-text {
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
}
.r-how-to__title {
  font-family: var(--font-primary);
  font-weight: 400;
  word-wrap: break-word;
  letter-spacing: 0.005em;
}
.r-how-to__title {
  font-size: 0.875rem;
  line-height: 1.4;
}
.r-how-to {
  display: grid;
  padding-block-start: var(--spacing-2xl);
  padding-block-end: var(--spacing-5xl);
  padding-inline: var(--container-padding-mobile);
}
@media (min-width: 64rem) {
  .r-how-to {
    grid-template-columns: repeat(2, 1fr);
    padding-block-start: 0;
    padding-block-end: 0;
    padding-inline: 0;
  }
}
@media (min-width: 64rem) {
  .r-how-to--image-right .r-how-to__video {
    grid-column: 2/2;
    grid-row: 1;
  }
  .r-how-to--image-right .r-how-to__body {
    grid-column: 1/1;
    grid-row: 1;
  }
}
.r-how-to__image {
  aspect-ratio: var(--mobile-aspect-ratio);
}
@media (min-width: 64rem) {
  .r-how-to__image {
    aspect-ratio: var(--desktop-aspect-ratio);
  }
}
.r-how-to .r-vimeo__controls {
  padding-inline-start: var(--spacing-xl);
  padding-inline-end: var(--spacing-2xl);
  padding-block: var(--spacing-xl);
}
@media (min-width: 64rem) {
  .r-how-to .r-vimeo__controls {
    padding: 72px;
  }
}
.r-how-to__image-wrapper {
  position: relative;
  width: 100%;
}
@media (min-width: 64rem) {
  .r-how-to__body-wrapper {
    max-width: 34.625rem;
  }
}
.r-how-to__content {
  cursor: pointer;
}
.r-how-to__only-image {
  pointer-events: none;
}
.r-how-to__body {
  display: flex;
  align-items: baseline;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 64rem) {
  .r-how-to__body {
    padding-inline: 160px;
    padding-block: 0;
  }
}
@media (min-width: 64rem) {
  .r-how-to__title {
    font-weight: 300;
    font-family: var(--font-primary);
    word-wrap: break-word;
    line-height: 1.2;
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.3;
  }
}
.r-how-to__body-text {
  margin-block-end: var(--spacing-5xl);
  padding-inline-end: var(--spacing-lg);
}
@media (min-width: 64rem) {
  .r-how-to__body-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 22;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    min-height: 22lh;
    margin-block-start: var(--spacing-5xl);
    min-height: unset;
    padding-inline: var(--spacing-md);
    font-weight: 300;
    font-family: var(--font-primary);
    word-wrap: break-word;
    line-height: 1.2;
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.3;
  }
}
.r-how-to__pro-tip {
  padding-inline-start: var(--spacing-3xl);
  padding-inline-end: var(--spacing-lg);
  padding-block: var(--spacing-md);
  background: var(--pro-tip-background-color, var(--base-colors-secondary-warm-white));
}
@media (min-width: 64rem) {
  .r-how-to__pro-tip {
    padding: var(--spacing-xl);
    font-weight: 300;
    font-family: var(--font-primary);
    word-wrap: break-word;
    line-height: 1.2;
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.3;
  }
}
.r-how-to__video {
  margin-block: var(--spacing-5xl);
}
@media (min-width: 64rem) {
  .r-how-to__video {
    margin-block: 0;
  }
}