.person-grid {
  display: grid;
  grid-template-areas:
    "photo"
    "title"
    "roles"
    "contacts"
    "info"
}

#person-photo       { grid-area: photo; }
#person-title       { grid-area: title; }
#person-roles       { grid-area: roles; }
#person-contacts    { grid-area: contacts; }
#person-info        { grid-area: info; }

#person-photo img {
  width: 100%;
}

.person-grid-wrapper {
  display: contents;
  position: relative;
  z-index: 0;
}


#person-title h1 {
  text-align: left;
}

.person-grid-item {
  padding-left: calc(var(--bs-gutter-x) / 2);
  padding-right: calc(var(--bs-gutter-x) / 2);
}

.person-photo {
  position: relative;
  z-index: 1;
}

.person-photo img {
  width: 100%;
}

.person-roles {
  list-style: none;
  margin:0;
  padding: 0;

  li > span {
    font-weight: var(--fontWeightBold);
  }
}

.person-role-units {
  list-style: none;
  margin:0;
  padding: 0;
}

.person-title-box,
.person-roles-box {
  padding: 0 20px;
}

.person-unigepass-box {
  padding: 0 calc((var(--bs-gutter-x) / 2) + 20px);
}


.person-button {
  font-size: var(--fontSizeBase);
  margin-top: 5px;
  margin-bottom: calc(var(--spaceUnit) * 2);
}

.person-ssd {
  font-size: var(--fontSizeSmall);
}

.person-assignments {
  list-style: none;
  margin: 1em 0 0 0;
  padding: 0;

  li {
    margin-bottom: 1em;

    .decofunzione {
      font-weight: var(--fontWeightBold);
    }

    .decostrutturafunzione {
      font-size: var(--fontSizeSmall);
    }
  }
}

.person-contacts {
  position: relative;
  z-index: 10;
}

.person-contacts-box {
  margin: calc(var(--spaceUnit) * 3) 0 40px 0;
  padding: 20px;

  border-radius: var(--boxCornerRadius);
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.15);
  background: var(--colorWhite);

  word-wrap: break-word;

  dt:not(:first-child) {
    margin-top: 1em;
  }

  dd {
    margin: 0;
  }

  .person-cv {
    list-style: none;
    margin: 0;
    padding: 0;
  }
}

.person-info-box {
  position: relative;
  background: var(--colorGrayXXXLight);
  border-radius: var(--boxCornerRadius);

  margin-top: calc(var(--spaceUnit) * 4);

  padding: 10px 20px 10px;

  h2:first-child {
    position: absolute;
    top: -16px;
    left: 30px;
    border-radius: var(--boxCornerRadius);
    margin:0;
    padding: 10px;
    background-color: var(--colorGrayLight);
    font-family: var(--fontSans);
    font-weight: var(--fontWeightBase);
    font-size: var(--fontSizeSmall);
    text-transform: uppercase;
  }

  h3 { 
    font-family: var(--fontSans);
    margin-bottom: calc(var(--spaceUnit) * 2);
  }

  ul { 
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--fontSizeBase);

    li {
      margin-bottom: 1em;

      .ins-cla {
        font-style: italic;
        color: var(--colorGrayDark);
      }
    }
  }
}

@media (max-width: 767px) {
  .row { margin-right: 0; }
  .col-md-12 { padding-right: 0; }
 
  .container {
    padding: 0;
  }
}

@media (min-width: 768px) {
  .person-grid {
      grid-template-columns: 2fr 310px;
      column-gap: 40px;
  }

  .person-grid-wrapper {
    display: block;
  }

  .person-grid-item {
    padding: 0;
  }

  .person-title-box,
  .person-roles-box,
  .person-unigepass-box {
    padding: 0 40px;
  }

  .person-info-box {
    padding: 10px 40px 10px;
  }

  .person-photo {
    margin-top: calc(var(--spaceUnit) * 4);

    img {
      border-top-left-radius: var(--boxCornerRadius);
      border-top-right-radius: var(--boxCornerRadius);
      box-shadow: 0 0 20px 0 rgba(0,0,0,0.15);
    }
  }

  .person-contacts.has-photo .person-contacts-box:first-child {
    margin-top: -20px;
  }
}


/*
  Minimal
*/
.persona-minimal-grid {
  margin: 2em 0;
  display: grid;
  column-gap: 1em;
  row-gap: 1em;
  grid-template-columns: 1fr;
}

.member-minimal {
  display: flex;
  margin-bottom: 1em;
}

.member-minimal .info {
  order: 2;
  margin-left: 12px;
}

.member-minimal .avatar img {
  max-width: 100px;
  border-radius: 1em;
  box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15);
}

@media screen and (min-width:480px) {
  .persona-minimal-grid {
    grid-template-columns: 1fr 1fr;
  }
}