.block-socials {
  margin-top: -60px;
  @media screen and (max-width: 1200px) {
    margin-top: 0;
  }
}
.block-socials__background {
  z-index: 0;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  pointer-events: none;

  & :is(img, picture, svg) {
    height: 100%;
  }
}

.block-socials__card {
  border-radius: 8px;
  padding: 50px 40px 40px;
  background-color: var(--socials-card-background, var(--color-main));

  display: flex;
  row-gap: 32px;
  flex-direction: column;
  min-height: 360px;
  overflow: hidden;
  position: relative;

  &.block-socials__card--only {
    --socials-card-background: var(--color-bg);
    --socials-title-color: var(--color-text);
    --socials-sub-title-color: var(--color-sub-text);
    min-height: auto;
    padding-right: 60px;
  }
}
.block-socials__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-heading);
  line-height: var(--font-line-heading);
  color: var(--socials-title-color, var(--color-white));
}
.block-socials__sub-title {
  max-width: 600px;
  font-weight: 400;
  font-size: var(--font-size-text);
  line-height: var(--font-line-text);
  color: var(--socials-sub-title-color, var(--color-bg));
}
.block-socials__list {
  --socials-color: var(--color-main);
  --socials-background: var(--color-body);
  margin-top: auto;
}

.block-socials__form {
  --socials-title-color: var(--color-text);

  border-radius: 8px;
  padding: 50px 40px 40px;
  border: 1px solid var(--color-line);
  background-color: var(--socials-form-background, var(--color-body));

  display: flex;
  row-gap: 32px;
  flex-direction: column;
  min-height: 360px;
  overflow: hidden;
  position: relative;

  &.block-socials__form--only {
    min-height: auto;
  }
}
.block-socials__title {
  max-width: 600px;
}
.block-socials__description {
  max-width: 600px;
  font-weight: 400;
  font-size: var(--font-size-text);
  line-height: var(--font-line-text);
  color: var(--color-sub-text);
}
.block-socials__footer {
  margin-top: auto;
  display: flex;
  column-gap: 32px;
  align-items: center;
}