.site_footer{
  background:var(--primary);
  height:160px;
  display:flex;
  align-items:center;
  margin-top:104px;
}

.footer_row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.footer_left{
  display:flex;
  flex-direction:column;
  gap:8px;
  color:var(--bg_and_main);
}

.footer_link{
  color:#262e34;
  font-size:18px;
  font-weight:500;
  text-decoration:none;
}

.footer_link:hover{
  color:#f6e7cf;
  text-decoration:none;
}

.footer_copy{
  font-size:16px;
  opacity:.9;
}

.footer_center{
  display:flex;
  justify-content:center;
  flex:1;
}

.footer_brand{
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--bg_and_main);
}

.footer_logo{
  display:block;
  flex-shrink:0;
}

.footer_brand_text{
  display:flex;
  flex-direction:column;
  line-height:1.05;
  gap: 2px;
}

.footer_name{
  font-size:18px;
  color:#f6e7cf !important;
}

.footer_role{
  font-size:14px;
  opacity:.85;
}

.footer_right{
  display:flex;
  align-items:center;
  gap:16px;
}

.footer_social{
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background 120ms ease, transform 120ms ease;
  background-color:transparent !important;
  box-shadow:none !important;
}

.footer_social img{
  width:34px;
  height:34px;
  display:block;
  opacity:.9;
}

.footer_social:hover{
  background-color:transparent !important;
  box-shadow:none !important;
  transform:translateY(-1px);
}

.footer_logo path:last-of-type{
  transition:transform 180ms ease-in-out;
  transform-origin:center;
  transform-box:fill-box;
}

.footer_brand:hover .footer_logo path:last-of-type{
  transform:scaleX(1.12);
}

@media (max-width: 960px) {
  .site_footer{
    width:100%;
    margin-top:56px;
    height:auto;
    min-height:230px;
    padding:24px 0 28px;
    box-sizing:border-box;
  }

  .site_footer .layout_container{
    max-width:100%;
    padding-left:0;
    padding-right:0;
  }

  .footer_row{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:22px;
    padding:0 20px;
    text-align:center;
  }

  .footer_center{
    order:1;
    display:flex;
    justify-content:center;
    width:100%;
  }

  .footer_right{
    order:2;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    width:100%;
  }

  .footer_left{
    order:3;
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    gap:20px;
    width:100%;
    flex-wrap:wrap;
    padding-bottom:4px;
  }

  .footer_brand{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
  }

  .footer_brand_text{
    display:flex;
    flex-direction:column;
    align-items:center;
    line-height:1.05;
  }

  .footer_name{
    margin:0;
    color:#f6e7cf;
    font-size:18px;
  }

  .footer_role{
    margin:0;
    color:#262e34;
    font-size:14px;
  }

  .footer_link,
  .footer_copy{
    margin:0;
    font-size:15px;
    line-height:1.3;
    color:#262e34;
    white-space:nowrap;
  }

  .footer_social{
    width:34px;
    height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
  }

  .footer_social img{
    width:34px;
    height:34px;
    display:block;
  }
}

@media (max-width: 960px) {
  .footer_social img{
    opacity:0;
  }

  .footer_social[aria-label="GitHub"]{
    background-image:url("../assets/icons/git_white.svg");
  }

  .footer_social[aria-label="Email"]{
    background-image:url("../assets/icons/email_white.svg");
  }

  .footer_social[aria-label="LinkedIn"]{
    background-image:url("../assets/icons/linkedin_white.svg");
  }
}

.footer_social[aria-label="GitHub"]:hover{
  background-image:url("../assets/icons/git_white.svg");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

.footer_social[aria-label="Email"]:hover{
  background-image:url("../assets/icons/email_white.svg");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

.footer_social[aria-label="LinkedIn"]:hover{
  background-image:url("../assets/icons/linkedin_white.svg");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

.footer_social:hover img{
  opacity:0;
}