@import 'variable.scss';
/* ==========================================================================
 *
 * File Name:         Cards
 * Description:       Visual cards that help to segment information
 * Editing Details:   Feel free to edit padding, margins, colours, and shadow.
 *                    Do not edit class display properties or change/eliminate classes.
 *
 ============================================================================ */
//Card Spacing & Widths
.card-container {
  display: flex;
  flex: row wrap unset;
  width: 75%;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
}

.card {
  margin: $card-margin;
  padding: $card-padding;
  position: relative;
}

.card-body-1 {
    padding: 1.25rem 0.5rem;
    box-shadow: $card-box-shadow;
  
    * {
      margin: 0 auto;
    }
    &:hover {box-shadow: $card-box-shadow-hover;}
  }

.card-body-2 {
  padding: 1.25rem 0.5rem;
  border-radius: 15px;
  box-shadow: $card-box-shadow;

  * {
    margin: 0 auto;
  }
  &:hover {box-shadow: $card-box-shadow-hover;}
}

//Card Color:
.card-beet {
    background-color: $card-bkgd-rose;
    color: map-get($accent,beet);
}

.card-kale {
    background-color: $card-bkgd-lettuce;
    color: map-get($accent,kale);
}


.card-deepwater {
    background-color: $card-bkgd-wave;
    color: map-get($accent,deepwater);
}

.card-mute {
    background-color: $card-bkgd-mute;
    color: map-get($basic,dark);
}

.card-dark {
    background-color: $card-bkgd-dark;
    color: map-get($basic,mute);
}

//Media Queries and responsiveness

@media (min-width: map-get($breakpoints, md)) and (max-width: map-get($breakpoints, lg)){
  .card-container {
    width: 70%;
  }
}

@media (min-width: map-get($breakpoints, sm)) and (max-width: map-get($breakpoints, md)){
  .card-container {
    width: 100%;
  }
}

@media (max-width: map-get($breakpoints, sm)) {
  .card-container {
    width: 100%;
  }
}