.sidebar-profile {
  color: var(--color-black);
}

@media only screen and (min-width: 500px) {
  .sidebar-profile {
    margin: var(--space-double) 0 0 0;
  }
}

.sidebar-profile h2 {
  color: var(--color-lehigh-brown);
  font-weight: bold;
}

@media only screen and (min-width: 500px) {
  .sidebar-profile .main-profile {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    margin: var(--space-double) 0;
  }
}

@media only screen and (min-width: 769px) {
  .sidebar-profile .main-profile {
    display: block;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    margin: var(--space-double) 0;
  }
}

.sidebar-profile .main-profile .az-profile {
  margin: var(--space-double) 0;
}

@media only screen and (min-width: 500px) {
  .sidebar-profile .main-profile .az-profile {
    margin: 0 var(--space-triple) 0 0;
    width: 60%;
  }
}

@media only screen and (min-width: 769px) {
  .sidebar-profile .main-profile .az-profile {
    margin: var(--space-double) 0;
    width: 100%;
  }
}

.sidebar-profile .main-profile h3 {
  font-size: 1rem;
  font-weight: bold;
}

.sidebar-profile .main-profile .courses {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebar-profile .cta {
  margin: var(--space-double) 0 0 0;
}

@media only screen and (min-width: 769px) {
  .sidebar-profile .cta {
    margin: var(--space-quintuple) 0 0 0;
  }
}

/* Targets college_of_business:button's own root ".button" class as
   rendered inside this component's own "cv" slot -- not a CSS leak (it
   reaches DOWN into content this component itself composes via its own
   slot, not sideways/up into an unrelated sibling/ancestor), same
   category as hover-box-cta's ".cta-list li .button" rule (Phase 4). */
.sidebar-profile .cta .button {
  width: 100%;
  background-color: var(--color-grey-dark);
  color: var(--color-white);
}

@media only screen and (min-width: 500px) {
  .sidebar-profile .cta .button {
    width: 40%;
  }
}

@media only screen and (min-width: 769px) {
  .sidebar-profile .cta .button {
    width: 100%;
  }
}

.sidebar-profile .cta .button:hover {
  color: var(--color-grey-dark);
  background-color: var(--color-white);
}

.sidebar-profile .profile-links a {
  display: block;
}