:root {
  --home-primary-font-family: Google Sans,Noto Sans,Noto Sans JP,Noto Sans KR,Noto Naskh Arabic,Noto Sans Thai,Noto Sans Hebrew,Noto Sans Bengali,sans-serif;

  /* Colors ================================================================= */

  /* Orange */
  --home-color-control-50: #fbefec;
  --home-color-control-200: #ffecd8;
  --home-color-control-500: #ffcbaa;

  /* Green */
  --home-color-device-50: #e2f1ea;
  --home-color-device-200: #cfebda;
  --home-color-device-500: #60c0b2;

  /* Grey */
  --home-color-grey-200: #f8f9fa;
  --home-color-grey-350: #ddd;
  --home-color-grey-700: #5f6368;
  --home-color-grey-900: #202124;

  /* Yellow */
  --home-color-media-50: #fffaf0;
  --home-color-media-200: #ffedbd;
  --home-color-media-500: #f2bd69;

  /* Blue */
  --home-color-primary-50: #eaf6f9;
  --home-color-primary-200: #cae8ef;
  --home-color-primary-500: #86c9ef;
  --home-color-primary-700: #1d7db3;
  --home-color-primary-800: #00639b;

  /* Purple */
  --home-color-tools-50: #f9e9f6;
  --home-color-tools-200: #e4c9e0;
  --home-color-tools-500: #c798d6;

  /* Links */
  --home-color-link-heading: #202124;
  --home-color-quick-link-hover: #f8f9fa;
}

/* ========================================================================== */
/* Device Supported row styles */
/* ========================================================================== */

@media screen and (max-width:1000px) {
  .home-landings-carousel .devsite-landing-row-inner {
    padding: 0 24px !important;
  }
}

@media screen and (max-width:600px) {
  .home-landings-carousel .devsite-landing-row-inner {
    padding: 0 16px !important;
  }
}

.home-landings-carousel .devsite-landing-row-description {
  font: 400 16px / 24px var(--home-primary-font-family);
  color: var(--home-color-grey-700) !important;
}

.home-landings-carousel .devsite-landing-row-group {
  grid: auto-flow / repeat(4, 1fr);
  grid-gap: 32px;
  margin: 32px auto 0;
}

@media screen and (max-width: 1000px) {
  .home-landings-carousel .devsite-landing-row-group {
    grid: auto-flow / repeat(3, 1fr);
  }
}

@media screen and (max-width: 600px) {
  .home-landings-carousel .devsite-landing-row-group {
    grid: auto-flow / repeat(2, 1fr);
  }
}

.home-landings-carousel .devsite-landing-row-item,
.home-landings-carousel .devsite-landing-row-item-description {
  border: 0;
  border-radius: 32px;
}

/* Carousel colors and hovers */
/* ========================================================================== */

/* BED & BATH */
.home-landings-carousel .device-carousel-bed-bad-color:hover {
  background-color: var(--home-color-tools-200) !important;
}

.home-landings-carousel .device-carousel-bed-bad-color .devsite-landing-row-item-icon {
  filter: invert(58%) sepia(10%) saturate(1429%) hue-rotate(240deg) brightness(85%) contrast(87%);
}

/* CLIMATE */
.home-landings-carousel .device-carousel-climate-color:hover {
  background-color: var(--home-color-primary-200) !important;
}

.home-landings-carousel .device-carousel-climate-color .devsite-landing-row-item-icon {
  filter: invert(39%) sepia(50%) saturate(1131%) hue-rotate(163deg) brightness(93%) contrast(85%);
}

/* HOUSEHOLD & KITCHEN */
.home-landings-carousel .device-carousel-household-color:hover,
.home-landings-carousel .device-carousel-kitchen-color:hover {
  background-color: var(--home-color-control-200) !important;
}

.home-landings-carousel .device-carousel-household-color .devsite-landing-row-item-icon,
.home-landings-carousel .device-carousel-kitchen-color .devsite-landing-row-item-icon {
  filter: invert(56%) sepia(51%) saturate(511%) hue-rotate(323deg) brightness(100%) contrast(101%);
}

/* LIGHTING */
.home-landings-carousel .devsite-landing-row-item:hover,
.home-landings-carousel .device-carousel-lighting-color:hover {
  background-color: var(--home-color-media-200) !important;
}

.home-landings-carousel .device-carousel-lighting-color .devsite-landing-row-item-icon {
  filter: invert(85%) sepia(55%) saturate(4675%) hue-rotate(323deg) brightness(93%) contrast(92%);
}

/* MEDIA */
.home-landings-carousel .device-carousel-media-color:hover {
  background-color: var(--home-color-media-50) !important;
}

.home-landings-carousel .device-carousel-media-color .devsite-landing-row-item-icon {
  filter: invert(60%) sepia(96%) saturate(334%) hue-rotate(344deg) brightness(94%) contrast(90%);
}

/* OUTDOOR */
.home-landings-carousel .device-carousel-outdoor-color:hover {
  background-color: var(--home-color-device-50) !important;
}

.home-landings-carousel .device-carousel-outdoor-color .devsite-landing-row-item-icon {
  filter: invert(40%) sepia(42%) saturate(416%) hue-rotate(121deg) brightness(92%) contrast(87%);
}

/* SECURITY */
.home-landings-carousel .device-carousel-security-color:hover {
  background-color: var(--home-color-device-200) !important;
}

.home-landings-carousel .device-carousel-security-color .devsite-landing-row-item-icon {
  filter: invert(40%) sepia(47%) saturate(352%) hue-rotate(121deg) brightness(93%) contrast(91%);
}

/* STACK OVERFLOW */
.home-landings-carousel .device-carousel-stack-overflow-color:hover {
  background-color: var(--home-color-grey-350) !important;
}

/* GOOGLE */
.home-landings-carousel .device-carousel-google-color:hover {
  background-color: var(--home-color-primary-200) !important;
}

/* NEWSLETTER */
.home-landings-carousel .device-carousel-newsletter-color:hover {
  background-color: var(--home-color-device-200) !important;
}

/* VOLUNTEER */
.home-landings-carousel .device-carousel-volunteer-color:hover {
  background-color: var(--home-color-control-200) !important;
}

/* ========================================================================== */

.home-landings-carousel .devsite-landing-row-item-body {
  flex-direction: column-reverse;
  padding: 48px 0 0 0;
}

.home-landings-carousel .devsite-landing-row-item-body h3 {
  font-size: 22px;
  font-weight: 700;
  line-height: 28px;
  margin: 0;
}

.home-landings-carousel .devsite-landing-row-item-description {
  padding: 24px;
}

.home-landings-carousel .devsite-landing-row-item-body:hover,
.home-landings-carousel a,
.home-landings-carousel a:hover,
.home-landings-carousel h3:hover {
  text-decoration: none !important;
}