.main-footer {
  position: relative;
  padding-top: var(--grid-gap);
  padding-bottom: var(--grid-gap);
}

.main-footer *:focus-visible {
  outline-color: var(--light-color);
}

.main-footer__background {
  background: var(--primary-color-extra-dark);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  pointer-events: none;
  z-index: -1;
  font-size: 0;
}

.main-footer__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main-footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-bottom: var(--grid-gap);
  gap: 10px;
}

.main-footer__logo {
  display: flex;
  gap: 20px;
  justify-content: flex-start;
  align-items: center;
  font-size: calc(18rem / var(--initial-font-multiplier));
}

.main-footer__logo-img {
  width: 100%;
  min-width: 30px;
  max-width: 76px;
}

.main-footer__sitename {
  min-width: 220px;
  max-width: 373px;
  color: var(--text-color);
  filter: invert(1) contrast(2);
}

.main-footer__sitename img {
  width: 100%;
}

.main-footer__social {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  margin-left: auto;
  color: hsl(0, 0%, 100%);
}

.main-footer__button {
  color: hsl(0, 0%, 85%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(var(--grid-gap) / 2);
  font-size: calc(16rem / var(--initial-font-multiplier));
  border: none;
  background: transparent;
  cursor: pointer;
  margin: 0;
}

.main-footer__button--circle {
  min-width: 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: hsla(0, 0%, 100%, 0.1);
  margin-left: 4px;
  margin-right: 4px;
  padding: 0;
  transition: all 0.15s ease-out;
}

@media (hover: hover) {
  .main-footer__button--circle:hover,
  .main-footer__button--circle:focus-visible {
    color: hsl(0, 0%, 100%);
    background: var(--primary-color-hover);
    border: none;
  }
}

.main-footer-lower__label {
  color: #a09eb9;
  font-size: calc(16rem / var(--initial-font-multiplier));
}

.main-footer-lower__value,
.main-footer-lower__value a {
  color: hsl(0, 0%, 100%);
  font-size: calc(22rem / var(--initial-font-multiplier));
}

.main-footer-lower__value a:hover {
  color: hsl(0, 0%, 100%);
}

.main-footer-lower__value a:hover,
.main-footer__small-text a:hover,
.main-footer__small-text-white a:hover,
.main-footer-lower__value a:focus-visible,
.main-footer__small-text a:focus-visible,
.main-footer__small-text-white a:focus-visible{
  text-decoration: underline;
}

.main-footer__small-text,
.main-footer__small-text-white {
  transition: font-size 0.5s ease-out;
}

.main-footer__small-text ,
.main-footer__small-text a,
.main-footer__small-text a:hover {
  color: #a09eb9;
  font-size: calc(12rem / var(--initial-font-multiplier));
}

.main-footer__small-text-white,
.main-footer__small-text-white a,
.main-footer__small-text-white a:hover {
  color: hsl(0, 0%, 100%);
  font-size: calc(12rem / var(--initial-font-multiplier));
}

.main-footer-grid {
  display: grid;
  grid-template-columns: auto auto auto auto;
  gap: var(--grid-gap) 10px;
  padding-top: 28px;
  border-top: 2px solid hsl(0deg 0% 100% / 12%);
}

.main-footer-grid__feedback {
  grid-column: 3;
}

.main-footer-grid__sputnik {
  grid-column: 4;
  grid-row: 1;
}

.main-footer-grid__error {
  grid-column: 4;
  grid-row: 2;
}

.main-footer-grid__policy {
  grid-column: 1 / 3;
}

@media screen and (max-width: 940px) {
  .main-footer-lower__label {
    color: #a09eb9;
    font-size: calc(12rem / var(--initial-font-multiplier));
  }

  .main-footer-lower__value,
  .main-footer-lower__value a {
    color: hsl(0, 0%, 100%);
    font-size: calc(16rem / var(--initial-font-multiplier));
  }
}

@media screen and (min-width: 790px) and (max-width: 940px) {
  .main-footer-grid {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 10px;
  }

  .main-footer-grid__feedback,
  .main-footer-grid__policy,
  .main-footer-grid__error,
  .main-footer-grid__sputnik {
    grid-column: unset;
  }

  .main-footer-grid__error,
  .main-footer-grid__sputnik {
    grid-row: unset;
  }
}

@media screen and (min-width: 420px) and (max-width: 789px) {
  .main-footer-grid {
    display: grid;
    grid-template-columns: auto auto;
    gap: 10px;
  }

  .main-footer-grid__error,
  .main-footer-grid__sputnik {
    grid-column: unset;
  }

  .main-footer-grid__error {
    grid-row: unset;
  }

  .main-footer-grid__sputnik {
    grid-row: 5;
  }

  .main-footer-grid__feedback,
  .main-footer-grid__policy {
    grid-column: 1 / 3;
  }
}

@media screen and (max-width: 735px) {
  .main-footer__logo-img {
    max-width: 45px;
  }
}

@media screen and (max-width: 419px) {
  .main-footer-grid {
    display: grid;
    grid-template-columns: auto;
    gap: 10px;
  }

  .main-footer-grid__feedback,
  .main-footer-grid__policy,
  .main-footer-grid__error,
  .main-footer-grid__sputnik {
    grid-column: unset;
  }
}

:root.root--special .main-footer__img {
  display: none;
}

:root.root--special .main-footer__background {
  background: var(--special-background-color);
}

:root.root--special .main-footer__logo-img {
  filter: grayscale(1);
}

:root.root--special[data-special-color="white"] .main-footer__logo,
:root.root--special[data-special-color="blue"] .main-footer__logo {
  filter: invert(1) contrast(2);
}

:root.root--special .main-footer__button--circle:hover {
  background: hsla(0, 0%, 100%, 0.1);
}

:root.root--special .main-footer-lower__label,
:root.root--special .main-footer-lower__value,
:root.root--special .main-footer__small-text,
:root.root--special .main-footer__small-text-white {
  color: var(--special-text-color);
}