about_panels.css

:root {
    --about-card-background: #454545;
}

.card {
  display: flex;
  gap: 20px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 40%;
  border-radius: 5px;
  margin: 100px;
  background: var(--about-card-background);
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

img {
  border-radius: 5px 5px 5px 5px;
}

.container {
  padding: 2px 16px;
}

.container_text {
  padding: 0px 50px 10px 0px;
}

.container_image {
  position: relative;
  transform: translate(-50%, -40%);
  width: 80px;
  height: 80px;
}

p.designation {
    margin-top: 0;
}

h3.designation {
    margin-bottom: 0;
}

h3 {
    font-size: 190%;
}

@media screen and (max-width: 600px) {
    
    .card {
        width: 100%;
        margin: 0px 40px 40px 40px;
    }
    
    .card-container {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .container_text {
        padding: 0px 20px 15px 20px;
    }
    
    .container_image {
        position: absolute;
    }
    
}