#card_slider {
    --f-carousel-slide-width: auto;
    --f-carousel-spacing: 40px;
  
    --f-button-prev-pos: -1rem;
    --f-button-next-pos: -1rem;
  
    --f-button-color: rgb(33, 33, 33, 0.5);
    --f-button-hover-color: rgb(33, 33, 33, 1);
    --f-button-active-color: rgb(33, 33, 33, 1);
    
    --f-button-bg: rgba(255, 255, 255, 0.5);
    --f-button-hover-bg: rgba(255, 255, 255, 1);
    --f-button-active-bg: rgba(255, 255, 255, 1);
  
    --f-button-width: 48px;
    --f-button-height: 48px;
    --f-button-border-radius: 50%;
  
    --f-button-svg-width: 22px;
    --f-button-svg-height: 20px;
    --f-button-svg-stroke-width: 1.5;
  
    --f-button-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px,
      rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
      rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

#card_slider img {
    max-height: 30vh;
    max-width: 100%;
}

#profile_pic {
    width: 30vw;
    height: 30vw;
}

.exp_image {
    max-height: 30vh; 
    max-width: 100%;
}

@media screen and (min-width: 768px) {
    #profile_pic {
        width: 200px;
        height: 200px;    
    }
    #card_slider img {
        max-height: 200px;
        max-width: 100%;
    }
    #card_slider {
        --f-carousel-spacing: 10px;

        --f-button-prev-pos: 1rem;
        --f-button-next-pos: 1rem;
    }
    .exp_image {
        max-height: 200px;
    }
}