.about {
 display: grid;
 grid-template-columns: 1fr 2fr;
 gap: var(--spacer-sm);
 overflow: clip;
 box-shadow: var(--panel-shadow-setup);
 border-radius: 1rem;
 background-color: var(--filling-space);
}
.about__img {
 height: 100%;
}
.about__img img {
 object-fit: cover;
 object-position: left top;
 min-height: 100%;
}
.about__content {
 display: flex;
 flex-direction: column;
 justify-content: start;
 gap: var(--spacer-sm);
 padding: var(--spacer-sm) var(--spacer-sm) var(--spacer-md) 0;
}
.about-links__row {
 display: grid;
 gap: var(--spacer-sm);
 grid-template-columns: 1.2fr 1fr;
}
.about__links {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 gap: var(--spacer-xs);
 text-wrap: balance;
}
.about__social-media {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 gap: var(--spacer-xs);
}
.about__contacts,
.about__contacts-mobile {
 color: var(--accent);
 display: flex;
 align-items: center;
 justify-content: start;
 gap: 0 var(--spacer-xs);
 width: fit-content;
 font-weight: var(--fw-m);
 border-bottom: solid transparent 0.1875rem;
 transition: 0.3s ease;
 cursor: pointer;
}
.about__contacts:hover,
.about__contacts:focus,
.about__contacts-mobile:hover,
.about__contacts-mobile:focus {
 border-bottom: solid var(--accent) 0.1875rem;
}
.about__contacts-mobile {
 display: none;
}
.about__link {
 color: var(--accent);
 display: flex;
 align-items: center;
 width: fit-content;
 gap: var(--spacer-xs);
 font-weight: var(--fw-m);
 border-bottom: solid transparent 0.1875rem;
 transition: 0.3s ease;
 cursor: pointer;
}
.about__link:hover,
.about__link:focus {
 border-bottom: solid var(--accent) 0.1875rem;
}
.copied-message {
 background-color: var(--filling-space);
 box-shadow: var(--panel-shadow-setup);
 border-radius: 1rem 1rem 1rem 0;
 color: var(--accent);
 font-weight: var(--fw-m);
 position: fixed;
 padding: 0.2rem 1rem;
 margin-left: -8rem;
 margin-top: -2.5rem;
 z-index: 9999;
 animation: fadeOut 2s ease;
 transform-origin: 100% 0%;
}
@keyframes fadeOut {
 0% {
  transform: translateY(50%);
  opacity: 0;
 }
 20% {
  transform: translateY(0%);
  opacity: 1;
 }
 80% {
  transform: translateY(0%);
  opacity: 1;
 }
 100% {
  opacity: 0;
  transform: translateY(-50%);
 }
}
@media (max-width: 39em) {
 .about__contacts-mobile {
  display: flex;
 }
 .about__tel-desktop {
  display: none;
 }
 .about-links__row {
  display: grid;
  gap: var(--spacer-sm);
  grid-template-columns: 1fr;
 }
}