/* =========================================================
EMPLOYEES / KEY TEAM
========================================================= */

.employee-grid {

```
display: grid;

grid-template-columns:
    repeat(3, minmax(0, 1fr));

gap: 22px;

width: 100%;
```

}

/* =========================================================
EMPLOYEE CARD
========================================================= */

.employee-card {

```
position: relative;

display: flex;

align-items: center;

gap: 15px;

min-width: 0;

padding: 20px;

background:
    var(--white);

border:
    1px solid var(--border);

border-left:
    4px solid var(--brand-orange);

border-radius:
    var(--radius-medium);

box-shadow:
    var(--shadow-soft);

overflow: hidden;

transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
```

}

.employee-card:hover {

```
transform:
    translateY(-4px);

box-shadow:
    var(--shadow-medium);

border-color:
    rgba(255,133,0,0.35);
```

}

/* =========================================================
EMPLOYEE NUMBER
========================================================= */

.employee-number {

```
position: absolute;

top: 10px;

right: 12px;

color:
    rgba(19,23,48,0.08);

font-size:
    25px;

line-height:
    1;

font-weight:
    800;
```

}

/* =========================================================
EMPLOYEE ICON
========================================================= */

.employee-icon {

```
width: 52px;

height: 52px;

flex:
    0 0 52px;

display:
    flex;

align-items:
    center;

justify-content:
    center;

border-radius:
    50%;

background:
    var(--brand-orange-light);

color:
    var(--brand-orange);

font-size:
    19px;
```

}

/* =========================================================
EMPLOYEE CONTENT
========================================================= */

.employee-content {

```
min-width:
    0;

padding-right:
    15px;
```

}

.employee-designation {

```
display:
    inline-block;

margin-bottom:
    4px;

color:
    var(--brand-orange);

font-size:
    10px;

font-weight:
    700;

letter-spacing:
    0.7px;

text-transform:
    uppercase;
```

}

.employee-name {

```
margin:
    0 0 3px;

color:
    var(--brand-navy);

font-size:
    17px;

line-height:
    1.35;

font-weight:
    700;

overflow-wrap:
    anywhere;
```

}

.employee-role {

```
margin:
    0;

color:
    var(--text-light);

font-size:
    12px;

line-height:
    1.4;
```

}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 991px) {

```
.employee-grid {

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        18px;
}
```

}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 767px) {

```
.employee-grid {

    grid-template-columns:
        1fr;

    gap:
        15px;
}


.employee-card {

    padding:
        18px;
}


.employee-icon {

    width:
        48px;

    height:
        48px;

    flex-basis:
        48px;

    font-size:
        17px;
}


.employee-name {

    font-size:
        16px;
}
```

}

/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

```
.employee-card {

    gap:
        12px;

    padding:
        16px;
}


.employee-icon {

    width:
        44px;

    height:
        44px;

    flex-basis:
        44px;

    font-size:
        16px;
}


.employee-name {

    font-size:
        15px;
}


.employee-designation {

    font-size:
        9px;
}
```

}