/* --- шрифты --- */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Jost-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Stetica";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/AA-Stetica-Regular.woff2") format("opentype");
}
@font-face {
  font-family: "Stetica";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/AA-Stetica-Medium.woff2") format("opentype");
}

/* --- базовые стили --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
:root {
  /* для fluid элементов */
  --base-desktop: 1920;
  --base-mobile: 360;
  --fluid-viewport-base: var(--base-desktop); /* основа для скейла */
  --fluid-value-modifier: 100vw; /* модификатор, что бы переводить в vw */

  --color-brand: #0d3030;
  --color-light: rgba(254, 248, 237, 1);
  --font-jost: "Jost", Helvetica, sans-serif;
  --font-stetica: "Stetica", Helvetica, sans-serif;

  --spacer-sm: calc(20 / var(--fluid-viewport-base) * var(--fluid-value-modifier)); /* 20px */
  --spacer-base: calc(40 / var(--fluid-viewport-base) * var(--fluid-value-modifier)); /* 40px */
}
img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;

  font-family: var(--font-stetica);
  color: var(--color-light);
  background-color: var(--color-brand);

  background-image: url("main-bg.webp");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;

  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

/* --- основные стили --- */
.main-wrapper {
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 1920px;
  min-width: 320px;
  margin-inline: auto;

  display: flex;
  flex-direction: column;
  gap: 100px;
  gap: calc(100 / var(--fluid-viewport-base) * var(--fluid-value-modifier));
}
.container {
  max-width: 1510px;
  margin-inline: auto;
  padding-inline: var(--spacer-base);
}
.main-logo {
  width: 326px;
  width: calc(326 / var(--fluid-viewport-base) * var(--fluid-value-modifier));
}
.header {
  padding-top: var(--spacer-base);
  margin-top: var(--spacer-base);
}
.main {
  flex-grow: 1;
}
.main__content {
  display: flex;
  gap: 148px;
  gap: calc(148 / var(--fluid-viewport-base) * var(--fluid-value-modifier));
  align-items: center;
  min-height: 600px;
  min-height: calc(600 / var(--fluid-viewport-base) * var(--fluid-value-modifier));
}
.main__image {
  width: 804px;
  width: calc(804 / var(--fluid-viewport-base) * var(--fluid-value-modifier));
  align-self: stretch;
  flex-shrink: 0;
}
.main__image > img {
  border-top-right-radius: 40px 40px;
  border-bottom-right-radius: 40px 40px;
  height: 100%;
  object-fit: cover;
}
.main__text {
  font-weight: 400;
  font-style: normal;
  font-size: 28px;
  font-size: calc(28 / var(--fluid-viewport-base) * var(--fluid-value-modifier));
  line-height: 40px;
  line-height: calc(40 / var(--fluid-viewport-base) * var(--fluid-value-modifier));
  letter-spacing: 0%;
  width: 705px;
  width: calc(705 / var(--fluid-viewport-base) * var(--fluid-value-modifier));
  text-wrap: balance;
  padding-inline: var(--spacer-sm);
}
.main__text > .title {
  font-family: var(--font-jost);
  font-weight: 400;
  font-style: normal;
  font-size: 64px;
  font-size: calc(64 / var(--fluid-viewport-base) * var(--fluid-value-modifier));
  line-height: 56px;
  line-height: calc(56 / var(--fluid-viewport-base) * var(--fluid-value-modifier));
  letter-spacing: 0;
  text-wrap: balance;
  margin-bottom: var(--spacer-base);
  margin-top: 0;
}
.main__text > .text {
  margin: 0;
}
.footer {
  padding-top: var(--spacer-base);
  margin-bottom: 60px;
  margin-bottom: calc(60 / var(--fluid-viewport-base) * var(--fluid-value-modifier));
}
.contact-email {
  font-weight: 500;
  font-size: 24px;
  font-size: calc(24 / var(--fluid-viewport-base) * var(--fluid-value-modifier));
  letter-spacing: 0;
  text-decoration: none;
  color: inherit;

  display: block;
  height: 40px;
  height: calc(40 / var(--fluid-viewport-base) * var(--fluid-value-modifier));
}

/* больше 1920 */
@media screen and (min-width: 1921px) {
  :root {
    --spacer-base: 40px;

    /* фиксируем базу и меняем модификатор на пиксели, что бы отключить скейл */
    --fluid-viewport-base: 1;
    --fluid-value-modifier: 1px;
  }
  .main__image > img {
    border-radius: 40px;
  }
}

/* между 1919 и 1024 */
@media screen and (max-width: 1919px) and (min-width: 1024px) {
  .main-wrapper {
    gap: 60px;
    gap: calc(60 / var(--fluid-viewport-base) * var(--fluid-value-modifier));
  }
  .main__content {
    min-height: unset;
    /*min-height: calc(360 / var(--fluid-viewport-base) * var(--fluid-value-modifier));*/
  }
  .footer {
    margin-bottom: 40px;
    margin-bottom: calc(40 / var(--fluid-viewport-base) * var(--fluid-value-modifier));
  }
}

/* меньше 1023 (мобилка) */
@media screen and (max-width: calc(1024px - 1px)) {
  :root {
    --spacer-base: 40px;

    /* переопределяем базу для fluid элементов */
    --fluid-viewport-base: var(--base-mobile);
    --fluid-value-modifier: 100vw;
  }
  .main-wrapper {
    gap: 80px;
    gap: calc(80 / var(--fluid-viewport-base) * var(--fluid-value-modifier));
  }
  .header {
    padding-top: 0;
    margin-top: var(--spacer-base);
  }
  .main-logo {
    width: 217px;
    width: calc(217 / var(--fluid-viewport-base) * var(--fluid-value-modifier));
  }
  .main__content {
    gap: 80px;
    gap: calc(80 / var(--fluid-viewport-base) * var(--fluid-value-modifier));
    flex-direction: column;
    min-height: unset;
  }
  .main__image {
    width: 100%;
    height: 300px;
    height: calc(300 / var(--fluid-viewport-base) * var(--fluid-value-modifier));
    padding-right: 20px;
    padding-right: calc(20 / var(--fluid-viewport-base) * var(--fluid-value-modifier));
  }
  .main__text {
    width: 100%;
    padding-inline: var(--spacer-base);
  }
  .main__text > .title {
    font-size: 36px;
    font-size: calc(36 / var(--fluid-viewport-base) * var(--fluid-value-modifier));
    line-height: 30px;
    line-height: calc(30 / var(--fluid-viewport-base) * var(--fluid-value-modifier));
    letter-spacing: 0;
  }
  .main__text > .text {
    font-size: 16px;
    font-size: calc(16 / var(--fluid-viewport-base) * var(--fluid-value-modifier));
    line-height: 19px;
    line-height: calc(19 / var(--fluid-viewport-base) * var(--fluid-value-modifier));
    letter-spacing: 0;
    text-wrap: initial;
  }
  .footer {
    padding: 0;
  }
  .contact-email {
    font-size: 20px;
    font-size: calc(20 / var(--fluid-viewport-base) * var(--fluid-value-modifier));
    line-height: 100%;
    letter-spacing: 0;
    height: 24px;
    height: calc(24 / var(--fluid-viewport-base) * var(--fluid-value-modifier));
  }
}