*, *::after, *::before {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
}

html {
  height: 100%;
  font-family: "Source Serif 4", serif;
  color: #242424;
}

body {
  height: 100%;
  display: flex;
  flex-direction: column;
}
body main {
  flex-grow: 1;
}

a, a:visited, a:active, a:focus {
  cursor: pointer;
  text-decoration: underline;
  color: inherit;
}

b {
  font-weight: 700;
}

i {
  font-style: italic;
}

.header {
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.header__content {
  padding: 20px 10px;
  display: flex;
  justify-content: center;
}
.header__logo {
  max-height: max(40px, min(60px, 40px + 20 * (100vw - 320px) / 400));
  width: auto;
}

.footer {
  width: 100%;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}
.footer__content {
  margin: 0 auto;
  width: 100%;
  max-width: 1000px;
  padding: 10px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer__logo {
  max-height: 30px;
  width: auto;
}
.footer__copyright {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.55);
  max-width: 600px;
}
@media screen and (max-width: 768px) {
  .footer__content {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer__copyright {
    margin-top: 15px;
  }
}

.wrap {
  max-width: 730px;
  margin: 0 auto;
  width: 100%;
  padding: 0 25px;
}
@media screen and (max-width: 500px) {
  .wrap {
    padding: 0 15px;
    max-width: 710px;
  }
}

.block {
  margin-top: max(25px, min(40px, 25px + 15 * (100vw - 320px) / 400));
}
.block_no-margins {
  margin: 0;
}

.content {
  padding: 0 0 max(35px, min(50px, 35px + 15 * (100vw - 320px) / 400)) 0;
}
.content-head {
  font-family: "Inter", sans-serif;
}
.content-head__block-img {
  margin-top: max(35px, min(50px, 35px + 15 * (100vw - 320px) / 400));
}
.content-head__block-title {
  margin-bottom: 10px;
}

.title {
  font-size: max(30px, min(42px, 30px + 12 * (100vw - 320px) / 400));
  line-height: 1.25;
  font-weight: 700;
}

.subtitle {
  font-size: max(18px, min(22px, 18px + 4 * (100vw - 320px) / 400));
  font-weight: 400;
  color: #6b6b6b;
}

.panel {
  padding: 5px max(15px, min(30px, 15px + 15 * (100vw - 320px) / 400));
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #0E7F7F;
  border-radius: 10px;
  color: #fff;
  font-size: max(14px, min(16px, 14px + 2 * (100vw - 320px) / 400));
  line-height: 2;
}
.panel__text {
  display: flex;
  align-items: center;
  gap: max(7px, min(10px, 7px + 3 * (100vw - 320px) / 400));
}
.panel__dot {
  display: inline-flex;
}
.panel__share {
  display: inline-flex;
  align-items: center;
}
.panel__share-icon {
  width: 18px;
}

.img__img {
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  width: 100%;
  margin: 0 auto;
  max-width: 100%;
}
.img__img_contain {
  width: auto;
}
.img__caption {
  margin-top: max(5px, min(10px, 5px + 5 * (100vw - 320px) / 400));
  font-family: "Inter", sans-serif;
  text-align: center;
  color: #6b6b6b;
  font-size: max(12px, min(14px, 12px + 2 * (100vw - 320px) / 400));
}

.video {
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  width: 100%;
  height: max(145px, min(382px, 145px + 237 * (100vw - 320px) / 400));
  margin: 0 auto;
}

.text {
  font-size: max(16px, min(20px, 16px + 4 * (100vw - 320px) / 400));
  line-height: 1.6;
  font-family: "Source Serif 4", serif;
}
.text__title {
  font-family: "Inter", sans-serif;
  font-size: max(16px, min(20px, 16px + 4 * (100vw - 320px) / 400));
  line-height: 1.2;
  font-weight: 600;
  margin-bottom: max(7px, min(12px, 7px + 5 * (100vw - 320px) / 400));
}
.text__list {
  padding-left: max(20px, min(30px, 20px + 10 * (100vw - 320px) / 400));
}
.text__list__item {
  margin-top: max(10px, min(18px, 10px + 8 * (100vw - 320px) / 400));
}

.quote-1 {
  position: relative;
}
.quote-1::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 4px;
  background-color: #242424;
  left: -24px;
  top: 0;
}
@media screen and (max-width: 500px) {
  .quote-1::after {
    left: -12px;
    width: 3px;
  }
}

.quote-2 {
  font-size: max(20px, min(28px, 20px + 8 * (100vw - 320px) / 400));
  color: #6b6b6b;
  font-weight: 400;
  font-family: "Inter", sans-serif;
  line-height: 1.4;
  margin-top: max(30px, min(50px, 30px + 20 * (100vw - 320px) / 400));
  margin-bottom: -10px;
}
.quote-2__text {
  padding-left: max(20px, min(30px, 20px + 10 * (100vw - 320px) / 400));
}
@media screen and (max-width: 500px) {
  .quote-2 {
    margin-bottom: 0px;
  }
}

.dots{
  height: 4px;
  display: block;
  margin: 0 auto;
}