/**
 * Allows you to use retina images at various pixel densities.
 * Examples:
 *
 *   @include retina(/images/mypic.jpg, 2);
 *   @include retina(/images/mypic.jpg, 3, 100px 100px, left top no-repeat transparent);
 *
 * @param  {Value}  $path               The path to the file name minus extension.
 * @param  {Number} $cap:    2          The highest pixel density level images exist for.
 * @param  {Value}  $size:   auto auto  The intended width of the rendered image.
 * @param  {Value}  $extras: null       Any other `background` values to be added.
 */
.root--download-platform {
  background-color: var(--color-background-primary);
}
.root--download-platform .page-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
  margin-bottom: 120px;
  padding: 55px 16px;
  background-color: var(--color-background-primary);
}
@media (max-width: 900px) {
  .root--download-platform .page-container {
    grid-template-columns: 1fr;
  }
}
.root--download-platform .hero-section h1 {
  margin: 0;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 500;
}
.root--download-platform .hero-section p {
  font-size: 15px;
  color: var(--color-text-medium-contrast);
}
.root--download-platform .subtitle {
  font-size: 18px;
}
.root--download-platform .platforms-list-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 15px;
  row-gap: 15px;
}
.root--download-platform .platforms-list-container img {
  vertical-align: middle;
}
@media only screen and (min-width: 768px) {
  .root--download-platform .platforms-list-container {
    padding-bottom: 10px;
    padding-top: 10px;
  }
}
.root--download-platform .image-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
}
.root--download-platform .image-carousel .carousel-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}
.root--download-platform .image-carousel .carousel-image.active {
  opacity: 1;
}