1  /* styles.scss */
  2  
  3  $primaryColor: #012060;
  4  
  5  .CardRoot {
  6    position: relative;
  7    overflow: hidden;
  8    width: 250px;
  9    height: 250px;
 10    border-radius: 12px;
 11    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 12    transition: box-shadow 0.3s ease;
 13  
 14    &:hover,
 15    &[data-target-focused] {
 16      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
 17    }
 18  }
 19  
 20  .CardTarget {
 21    display: block;
 22    height: 100%;
 23    padding: 0.5rem 1rem 0rem 1rem;
 24    color: $primaryColor;
 25    text-decoration: none;
 26    transition: color 0.3s ease;
 27  
 28    @media screen and (max-width: 768px) {
 29      font-size: 22px; /* Adjust the font size for mobile */
 30    }
 31  
 32    &:hover {
 33      color: lighten($primaryColor, 20%);
 34    }
 35  }
 36  
 37  .content {
 38    padding: 0.5rem;
 39  
 40    @media screen and (max-width: 768px) {
 41      font-size: 14px; /* Adjust the font size for mobile */
 42    }
 43  }
 44  
 45  .learnMore {
 46    padding: 0.2rem 0.2rem;
 47    background-color: $primaryColor;
 48    color: #fff;
 49    text-align: center;
 50    cursor: pointer;
 51    transition: background-color 0.3s ease;
 52    font-size: 22px;
 53  
 54    @media screen and (max-width: 768px) {
 55      font-size: 16px; /* Adjust the font size for mobile */
 56      padding: 0.5rem 0.5rem;
 57    }
 58  
 59    &:hover {
 60      background-color: darken($primaryColor, 10%);
 61    }
 62  }
 63  
 64  .TableRoot {
 65    width: 100%;
 66    margin-top: 0rem;
 67    display: flex;
 68    justify-content: center;
 69  
 70    @media screen and (min-width: 769px) {
 71      margin-top: -5px; /* Adjust the top margin for desktop view */
 72    }
 73  }
 74  
 75  .TableHeader,
 76  .TableRow {
 77    background-color: transparent;
 78  }
 79  
 80  .TableCell {
 81    padding: 0.5rem;
 82    border: none;
 83    font-size: 11px;
 84    width: 100px;
 85    max-width: 100px;
 86    box-sizing: border-box;
 87    overflow: hidden;
 88    text-overflow: ellipsis;
 89    white-space: nowrap;
 90    border-bottom: 1px solid #ccc;
 91    text-align: left;
 92  
 93    @media screen and (max-width: 768px) {
 94      font-size: 10px;
 95    }
 96  }
 97  
 98  .TableRow:hover {
 99    background-color: transparent;
100  }