#app{display:flex;flex-direction:column}main.grid{padding-bottom:2rem}aside.grid,main.grid{grid-template-columns:repeat(1,1fr)}aside.grid select{margin-bottom:0}.none{text-align:center;color:#a5a5a5}@media screen and (min-width:768px){aside.grid,main.grid{grid-template-columns:repeat(2,1fr)}}@media screen and (min-width:1440px){main.grid{grid-template-columns:repeat(3,1fr)}aside.grid{grid-template-columns:repeat(4,1fr)}}@media screen and (min-width:2000px){main.grid{grid-template-columns:repeat(4,1fr)}}.personae{display:flex;padding:0;flex-direction:column;align-items:center;border:1px solid #a5a5a5;overflow:hidden}.personae h2{text-transform:capitalize}.personae h2 span{text-transform:uppercase}.personae>img{width:200px;height:300px;border-radius:.25rem;margin-top:.5rem}.personae section{margin:0;padding-left:.25rem}.personae section hgroup{text-align:center;padding:1rem .25rem 0}.personae section hgroup h2{font-size:1.2rem}.personae section hgroup h2 a{text-decoration:none;cursor:pointer}.personae section hgroup h2 a:hover{text-decoration:underline}.personae section hgroup>:not(:first-child):last-child{font-size:.75rem}.personae section hgroup p small{display:block}.personae section .skills em{font-style:normal;list-style-type:none;color:#fff;border-radius:1rem;padding:.25rem .5rem;margin:.15rem;font-size:.75rem;background-color:#3bb78f;text-wrap:nowrap}.personae section .skills em.hobby{background-color:#f2df0d;color:#000}.personae section .contact{padding:0 .25rem;font-size:.75rem;display:flex;align-items:center;justify-content:center}.personae section .contact span:not(:first-of-type):before{content:"|";margin:0 .25rem}.personae section .contact .tel{text-decoration:none;color:currentColor}.personae section .contact .tel:hover{text-decoration:underline}.personae .customers{width:100%;flex-direction:row;border-top:2px solid rgba(223,32,70,.3)}.personae .customers,.personae .customers .customer{display:flex;align-items:center;justify-content:center}.personae .customers .customer{background-color:#fff;padding:2px;border-bottom:none}.personae .customers .customer img{width:64px;height:64px}@media screen and (min-width:1024px){.personae{flex-direction:row;height:302px;align-items:stretch;margin-bottom:0}.personae h2 span{display:block}.personae>img{margin:0;border-radius:0;height:100%;width:200px}.personae section{flex-grow:1;width:calc(100% - 280px)}.personae section hgroup{text-align:left}.personae section .skills em{font-size:.6rem}.personae section .contact{justify-content:start;font-size:.6rem}.personae .customers{width:80px;flex-direction:column;align-items:center;justify-content:end;border-top:none;border-left:2px solid rgba(223,32,70,.3);border-radius:0 .5rem .5rem 0;padding-bottom:.5rem}}