/**
 * This is a LESS file. LESS allows a whole host of
 * extra functionalities relative to CSS, including variables, inheritance,
 * functions, and math. This is automatically compiled into minified CSS and a
 * source map and injected into the story HTML.
 * @see https://lesscss.com
 */

/**
 * @see https://github.com/css-modules/css-modules
 * Accelerator is configured to use CSS Modules. Ordinarily, a CSS class you
 * define (e.g. .foo) will affect every element with that class
 * (e.g. <a class="foo"></a>). With CSS Modules, variables are local to the
 * file in which they are imported, unless the author indicates otherwise.
 * The .rewindButton class below has an example of this.
 *
 * If you'd like to opt out of CSS Modules functionality, give your style
 * files the suffix `.nomodule.css`, e.g. `passage.nomodule.css`, or change
 * the build configuration so that modularization is off by default.
 */

/**
 * You can include Sass files in other Sass files, composing them elegantly.
 * The following statement imports the built-in styles, which you may adjust or
 * add to at your risk and leisure.
 */
@import '../_global-styles/built-ins.less';

/**
 * Variables can be defined (and shared through imports elsewhere) as any
 * CSS value, or the result of a CSS value passed to a function.
 */
@darker-background-color: darken(@background-color, 1 + 0.1);

@image-card-width: 250px;
@max-image-card-width: 80%;

.imageCard {
  /* You can set properties to the value of a variable. */
  width: @image-card-width;
  max-width: @max-image-card-width;

 /* You can also use math operators on a wide variety of values in Sass. */
  padding: @space-med + @space-sm * 0.5;
  margin: 0 auto @space-med auto;
  background-color: @darker-background-color;
}

.image {
  width: 100%;
}

.counterButton {
  margin-bottom: @space-sm * 2;
}

.cyclingLinkCard {
  display: inline-block;
  margin-bottom: @space-med + @space-sm * 0.5;
}