.container{
    max-width:1200px;
    margin:auto;
    padding:60px 20px 100px;
}

h1{
    text-align:center;
    color:#1c9a90;
    font-size:40px;
    margin-bottom:80px;
}

/* GRID GENERAL */

.team{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    grid-auto-rows:120px;
    position:relative;
    column-gap: 14px;
  row-gap: 10px;
}

.title-comercial{
    color: #009490;
    font-family: Rubik;
    font-size: 72px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

/* PERSONA */

.person{
    text-align:center;
}

.person .name{
    color: #009490;
    text-align: center;
    font-family: Rubik;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 21.6px */
}

.person .role{
    color: #000;
font-family: Lato;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 120%;
white-space: nowrap;
}

.person .number{
   color: #999;
font-family: Lato;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 120%;
}

.person .email{
   color: #777;
font-family: Lato;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 120%;
}

.avatar{
    width:120px;
    height:120px;
    border-radius:50%;
    overflow:hidden;
    margin:auto;
    margin-bottom:10px;
}

.avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* bordes */

.green{ border:6px solid #148a82;}
.light{ border:6px solid #8ed7cf;}
.yellow{ border:6px solid #e5dd8c;}

/* tamaños */

.big .avatar{
    width:160px;
    height:160px;
}

.medium .avatar{
    width:140px;
    height:140px;
}

/* textos */

.name{
    font-weight:700;
    color:#148a82;
    font-size:14px;
}

.role{
    font-size:12px;
    color:#555;
}

.contact{
    font-size:11px;
    color:#777;
}

/* POSICIONES (simulan el diseño del layout) */

.p1{grid-column:2; grid-row:1;}
.p2{grid-column:4; grid-row:2;}
.p3{grid-column:9; grid-row:3;}

.p4{grid-column:3; grid-row:4;}

.p5{grid-column:8; grid-row:5;}
.p6{grid-column:9; grid-row:5;}
.p7{grid-column:10; grid-row:5;}

.p8{grid-column:2; grid-row:6;}
.p9{grid-column:3; grid-row:6;}
.p10{grid-column:4; grid-row:6;}

.p11{grid-column:8; grid-row:7;}
.p12{grid-column:9; grid-row:7;}
.p13{grid-column:10; grid-row:7;}
.p14{grid-column:8; grid-row:9;}
.p15{grid-column:9; grid-row:9;}



@media (max-width: 768px)  {

/* POSICIONES (simulan el diseño del layout) */

.p1{grid-column:span 2; grid-row:1;}
.p2{grid-column:span 2; grid-row:3;}
.p3{grid-column:span 2; grid-row:5;}
.p4{grid-column:span 2; grid-row:7;}
.p5{grid-column:1; grid-row:15;}
.p6{grid-column:2; grid-row:15;}
.p7{grid-column:1; grid-row:11;}
.p8{grid-column:1; grid-row:19;}
.p9{grid-column:2; grid-row:17;}
.p10{grid-column:1; grid-row:17;}
.p11{grid-column:2; grid-row:9;}
.p12{grid-column:1; grid-row:9;}
.p13{grid-column:2; grid-row:11;}
.p14{grid-column:1; grid-row:13;}
.p15{grid-column:2; grid-row:13;}


.title-comercial{
    font-size: 28px;
    margin: 0px auto  50px auto;
}

.person .role{
    white-space: initial;
}

.team{
    grid-template-columns: none;
}

}