.branding{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 0.5rem;
  font: var(--f-Montserrat-12-400);
  text-transform: uppercase;
  color: var(--c-secondary);
  text-decoration: none;
}
@media(min-width: 576px){
  .branding{
    gap: 1rem;
  }
}
@media(min-width: 768px){
  .branding{
    font: var(--f-Montserrat-18-400);
  }
}

.branding:hover{
    text-decoration: none;
}

.branding span{
  border-left: 1px solid var(--c-secondary);
  padding: 0 0.5rem;
  width: 7.5rem;
}
@media(min-width: 576px){
  .branding span{
    padding: 0.5rem 0 0.5rem 1rem;
    width: 10rem;
  }
}
@media(min-width: 768px){
  .branding span{
    padding: 0.25rem 0 0.25rem 1rem;
  }
}

.branding img{
  width: 7rem;
}
@media(min-width: 576px){
  .branding img{
    width: 11.5rem;
  }
}