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