/* Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is
 * Powered by W3.CSS. */

.cards-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  overflow: hidden;
  margin: 1ex 1ex;
  /* border-color: #000000; */
}

@media screen and (min-width: 40em) {
    .card {
        flex: 0 1 calc(50% - 1em);
        max-width: 256px;
    }
}

@media screen and (min-width: 60em) {
    .card {
        flex: 0 1 calc(33% - 1em);
        max-width: 256px;
    }
}

  /* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add some padding inside the card container */
.card-body{
    padding: 2px 8px;
}