@charset "utf-8";

.RegularPromotedCompactCards__wrapper { margin: 0px auto; max-width: 90rem; }

.RegularPromotedCompactCards__content { column-gap: 1rem; display: grid; grid-template-columns: repeat(6, minmax(12.5%, 1fr)); margin-left: 1rem; margin-right: 1rem; }

@media (min-width: 768px) {
  .RegularPromotedCompactCards__content { margin-left: 1.5rem; margin-right: 1.5rem; }
}

@media (min-width: 1024px) {
  .RegularPromotedCompactCards__content { grid-template-columns: repeat(12, minmax(6.4%, 1fr)); margin-left: 2.5rem; margin-right: 2.5rem; }
}

.RegularPromotedCompactCards__heading { grid-area: 1 / span 6; padding-bottom: 2rem; }

@media (min-width: 768px) {
  .RegularPromotedCompactCards__heading { grid-column: 2 / 5; }
}

@media (min-width: 1024px) {
  .RegularPromotedCompactCards__heading { grid-column: 1 / span 6; }
}

.RegularPromotedCompactCards__headingSubtitle { color: var(--pal-colors-default-content-xsubtle); padding-top: 0.5rem; }

.RegularPromotedCompactCards__cards { align-items: stretch; display: flex; flex-direction: column; grid-area: 2 / 1 / auto / 7; row-gap: 1rem; }

@media (min-width: 768px) {
  .RegularPromotedCompactCards__cards { grid-column: 2 / 6; }
}

@media (min-width: 1024px) {
  .RegularPromotedCompactCards__cards { column-gap: 1rem; flex-direction: row; grid-column: 1 / 13; justify-content: center; }
}

.RegularPromotedCompactCards .ColorCard__leftColumn { flex: 1 0 auto; }

.RegularPromotedCompactCards .ColorCard__rightColumn { flex: 1 1 100%; }

@media (min-width: 1024px) {
  .RegularPromotedCompactCards--oneItem { grid-column: 5 / 9; }
  .RegularPromotedCompactCards--twoItems { grid-column: 3 / 11; }
}

.RegularPromotedCompactCards--threeItems .RegularPromotedCompactCards__Item, .RegularPromotedCompactCards--twoItems .RegularPromotedCompactCards__Item { background-color: var(--pal-colors-default-background-xsubtle); flex: 1 1 0%; }

.ColorCard { margin: 0px auto; max-width: 90rem; }

.ColorCard__content { align-items: center; background-color: var(--pal-colors-default-background-xsubtle); display: flex; margin: 0px auto; padding: 1.5rem; }

.ColorCard__leftColumn { align-self: center; max-width: 5.5rem; min-width: 5.5rem; }

@media (min-width: 1024px) {
  .ColorCard__leftColumn { max-width: 6.5rem; min-width: 6.5rem; }
}

.ColorCard__rightColumn { margin-left: 1.5rem; }

.ColorCard__rightColumn h3 { font-weight: 500; }

.ColorCard__subtitle { padding-top: 0.25rem; word-break: break-word; }

.ColorCard__action { padding-top: 0.5rem; }

.ColorCard__action .pal-c-Button { bottom: -1px; font-family: var(--pal-font-family-000); font-size: var(--pal-font-size-12px); font-weight: var(--pal-font-weight-book); letter-spacing: var(--pal-letter-spacing-03px); line-height: var(--pal-line-height-16px); }

.ColorCard__action .pal-c-Link::after { background: none; }

.VideoPlayer__thumbnail { cursor: pointer; position: relative; }

.VideoPlayer__play { background: var(--pal-color-button-secondary-background); border: none; border-radius: 5rem; cursor: pointer; height: 2rem; left: 50%; padding: 0px; width: 2rem; z-index: 3; }

.VideoPlayer__play, .VideoPlayer__play svg { font-size: 6.25rem; position: absolute; text-align: center; top: 50%; transform: translate(-50%, -50%); }

.VideoPlayer__play svg { left: 54%; }

@media (min-width: 1024px) {
  .react-player__preview { height: 28.81rem !important; object-fit: fill; }
}

.InlineVideo { position: relative; }

.InlineVideo--paused svg { margin-left: 0.275rem; }

.InlineVideo video { vertical-align: bottom; }

.InlineVideo__controlButton { cursor: pointer; left: 1rem; position: absolute; z-index: 3; }

.InlineVideo__controlButton, .InlineVideo__controlButton:active, .InlineVideo__controlButton:focus, .InlineVideo__controlButton:hover { background-color: var(--pal-color-button-secondary-background); border-color: var(--pal-color-button-secondary-border); bottom: 1rem; color: var(--pal-color-button-secondary-content); }

.InlineVideo__controlButton:active svg, .InlineVideo__controlButton:focus svg, .InlineVideo__controlButton:hover svg { fill: var(--pal-color-button-secondary-content); }

.InlineVideo__controlButton svg { vertical-align: middle; }