// Basic Card
//
//  - Make sure you have tabbing focus indicators for all elements that need to be highlighted.
//  - Every `<img>` you add to your site needs to have an alt attribute. If the image is informational, set the `alt` equal to a *descriptive* alternative for that image.
//  - If the image is decorative or redundant to adjacent text, set `alt=""`, which conveys to assistive technology users that the image isn’t necessary for understanding the page.
//  - Avoid using generic strings like photo, image, or icon as `alt` values, as they don’t communicate valuable content to the user. Be as descriptive as possible.
//  - You can add `class="visuallyhidden"` with descriptive text to give more context to a button or link's purpose.
//
//
// <section data-action="aria-toggle" class="atblock"><h3 class="atblock__title"><a href="#cards_guide">WCAG 2.1 Guidelines</a></h3><div id="cards_guide" class="atblock__panel guidelines"><p><a href="https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=131#text-equiv" target="_blank">1.1.1 Non-text Content</a> - All non-text content that is presented to the user has a text alternative that serves the equivalent purpose (some exceptions). (Level A)<br><br><strong>Note:</strong> If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it does not need text alternatives.<br><br><a href="https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=131#visual-audio-contrast-contrast" target="_blank">1.4.3 Contrast (Minimum)</a> - The visual presentation of text and images of text has a contrast ratio of at least 4.5:1 (some exceptions). (Level AA)<br><br><a href="https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=131#visual-audio-contrast-text-presentation" target="_blank">1.4.5 Images of Text</a> - If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text (some exceptions). (Level AA)</p><p><a href="https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=131#navigation-mechanisms-focus-visible" target="_blank">2.4.7 Focus Visible</a> - Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)</p></div><div class="markup"></div></section>
//
//
//
// Markup: cards-basic.twig
//
// Style guide: Cards.basic

// Import site utilities.
@import '../../global/utils/init';

.card {
  position: relative;
  max-width: 300px;
  display: inline-block;
}

.card__image {

  img {
    max-width: 100%;
    border-radius: $border-rd-sm;
    object-fit: cover;
    width: 300px;
    height: 300px;
  }
}

.card__title {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: $padding-md;
  background: rgba($color-black, 0.65);
  margin-bottom: 6px;
  border-radius: 0 0 $border-rd-sm $border-rd-sm;
  text-align: center;

  a {
    color: $color-white;
  }
}
