.client-detail {
  position: relative;
}

.client-grid {
  display: grid;
  gap: 15px;
  grid-template-columns: 1fr;
  grid-template-areas: "header" "img" "contacts" "list" "badges" "about" "actions";
}
@media (min-width: 768px) {
  .client-grid {
    grid-template-columns: auto 1fr;
    grid-template-areas: "header header" "img list" "contacts list" "badges badges" "about about" "actions actions";
  }
}
@media (min-width: 992px) {
  .client-grid {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "img header actions" "img list actions" "contacts contacts contacts" "badges badges badges" "about about about";
  }
}
.client-grid-img-container {
  max-width: 100%;
  grid-area: img;
}
.client-grid-img-container .client-img,
.client-grid-img-container .client-video {
  max-width: 100%;
  object-fit: cover;
  height: 53.125vw;
}
@media (min-width: 576px) {
  .client-grid-img-container .client-img,
  .client-grid-img-container .client-video {
    height: 240px;
  }
}
.client-grid-img-container .client-img {
  aspect-ratio: 1;
}
@media (min-width: 992px) {
  .client-grid-img-container .client-img-container {
    width: 240px;
  }
}
.client-grid-img-container .client-video {
  aspect-ratio: 27/48;
}
@media (min-width: 992px) {
  .client-grid-img-container .client-video-container {
    width: 135px;
  }
}
.client-grid-header {
  grid-area: header;
}
.client-grid-list {
  grid-area: list;
}
.client-grid-actions {
  grid-area: actions;
  text-align: center;
}
@media (min-width: 992px) {
  .client-grid-actions {
    text-align: right;
  }
}
.client-grid-contacts {
  grid-area: contacts;
  text-align: center;
}
@media (min-width: 576px) {
  .client-grid-contacts {
    text-align: left;
  }
}
.client-grid-badges {
  grid-area: badges;
}
.client-grid-about {
  grid-area: about;
}
@media (min-width: 992px) {
  .client-grid-about {
    padding-top: 15px;
  }
}

.client-contacts {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
@media (min-width: 576px) {
  .client-contacts {
    min-width: 240px;
  }
}