:root {
  --color-white: #fff;
  --color-black: #000;
  --color-grey-300: #acc1de;
  --color-grey-500: #5e6e85;
  --color-blue-100: #e1e7fe;
  --color-blue-300: #b3d3f1;
  --color-blue-500: #345ff6;
  --color-blue-900: #253347;
}

.header {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 85px 41px;
  background: url(../images/hero-container.png) no-repeat center;
  background-size: cover;
}

@media screen and (max-width: 1100px) {

  .header {
    align-items: center;
  }
}

.main {
  display: flex;
  flex-direction: column;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 41px;
}

.header__logo {
  width: 58.75px;
  height: 58.75px;
}

.section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

@media screen and (max-width: 1100px) {

  .section {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

.section__image {
  max-width: 100%;
  max-height: 533px;
  object-fit: cover;
}

.text__container {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 564px;
}

@media screen and (max-width: 1100px) {

  .text__container {
    align-items: center;
    text-align: center;
  }
}

.text__title {
  color: var(--color-blue-900,);
  font-weight: 600;
  font-size: 64px;
  font-style: normal;
  line-height: 110%;
  letter-spacing: -3.2px;
}

.text__description {
  color: var(--color-grey-500);
  font-weight: 400;
  font-size: 16px;
  font-style: normal;
  line-height: 150%;
}

.calculator__container {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 564px;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 10px 20px rgb(0 0 0 / 0.1);
  background-color: var(--color-white);
}

.calculator__box {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.calculator__input-description {
  color: var(--color-blue-900);
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 29px;
  letter-spacing: -1.2px;
}

.calculator__options {
  display: flex;
  gap: 24px;
}

.calculator__option {
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--color-blue-900);
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  cursor: pointer;
}

.calculator__option input[type='radio'] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  width: 31px;
  height: 31px;
}

.calculator__option-checkmark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  border: none;
  outline: none;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-blue-100);
  transition: all 0.2s ease;
}

.calculator__option-checkmark::after {
  content: '';
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--color-blue-500);
  opacity: 0;
  transform: scale(0);
  transition: all 0.2s ease-in-out;
}

.calculator__option
  input[type='radio']:checked
  + .calculator__option-checkmark::after {
  opacity: 1;
  transform: scale(1);
}

.calculator__inputs {
  display: flex;
  gap: 24px;
}

.calculator__input-group {
  display: flex;
  gap: 24px;
}

.calculator__input-group--metric {
  flex-direction: row;
}

.calculator__input-group--imperial {
  flex-direction: column;
}

.calculator__input-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.calculator__input-row {
  display: flex;
  gap: 16px;
  flex: 1;
}

.calculator__label {
  color: var(--color-grey-500);
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150% /* 21px */;
}

.calculator__input {
  padding: 16px 24px;
  border-radius: 12px;
  border: 1px solid var(--color-grey-500);
  background: var(--color-white);
  font-size: 24px;
  flex: 1;
}

/* Убираем стрелочки у input type="number" */

.calculator__input::-webkit-outer-spin-button,
.calculator__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.calculator__input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.calculator__input::placeholder {
  color: var(--color-blue-500);
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 29px;
  letter-spacing: -1.2px;
}

.calculator__results {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  border-radius: 16px 100px 100px 16px;
  padding: 32px;
  background-color: var(--color-blue-500);
}

@media screen and (max-width: 500px) {

  .calculator__results {
    align-items: self-start;
    flex-direction: column;
  }
}

.calculator__result-box {
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  color: var(--color-white);
}

.calculator__result-text {
  color: var(--color-white);
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
}

.calculator__result-score {
  color: var(--color-white);
  font-family: Inter, sans-serif;
  font-size: 64px;
  font-style: normal;
  font-weight: 600;
  line-height: 110%;
  letter-spacing: -3.2px;
}

.calculator__ideal-weight {
  flex: 1 0 0;
  color: var(--color-white);
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 14px;
  font-style: normal;
  line-height: 150%;
}

.tips__container {
  display: flex;
  gap: 32px;
  padding: 92.5px 0;
  margin: 85px 0;
  border-radius: 35px;
  flex: 1;
  justify-content: center;
  background: linear-gradient(
    90deg,
    rgb(214 252 254 / 0) 0%,
    rgb(214 230 254 / 0.25) 100%
  );
}

.tips__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 365px;
}

.tips__item img {
  margin-bottom: 24px;
}

.tips__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.tips__title {
  color: var(--color-blue-900);
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 29px;
  letter-spacing: -1.2px;
}

.tips__description {
  color: var(--color-grey-500);
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.grid__title {
  color: var(--color-blue-900, #253347);
  font-size: 48px;
  font-style: normal;
  font-weight: 600;
  line-height: 110%;
  letter-spacing: -2.4px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto, minmax(365px, 1fr));
  gap: 32px;
  width: 100%;
  padding: 85px 0;

  .grid__item {
    max-width: 365px;
    display: flex;
    flex-direction: column;
    gap: 17px;
    padding: 32px;
    border-radius: 16px;
    background: var(--color-white, #fff);
    box-shadow: 16px 32px 56px 0 rgb(143 174 207 / 0.25);
  }

  .grid__item-text {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    max-width: 100%;
    background: none;
    box-shadow: none;
  }

  .grid__item-gender {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 2;
    justify-self: center;
  }

  .grid__item-age {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
  }

  .grid__item-muscle {
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 3;
  }

  .grid__item-pregnancy {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;
  }

  .grid__item-race {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 4;
  }
}

.grid_subtitle {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: -1px;
}

.grid__description {
  color: var(--color-grey-500, #5e6e85);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

@media screen and (max-width: 1100px) {

  .tips__container {
    flex-direction: column;
    padding: 50px 0;
    margin-bottom: 0;

    .tips__item {
      max-width: none;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 40px;
    }
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 96px 0;

    .grid__item {
      max-width: none;
      display: flex;
      flex-direction: column;
      gap: 17px;
      padding: 32px;
      border-radius: 16px;
      background: var(--color-white, #fff);
      box-shadow: 16px 32px 56px 0 rgb(143 174 207 / 0.25);
    }

    .grid__item-text {
      grid-column-start: 1;
      grid-column-end: 5;
      grid-row-start: 1;
      grid-row-end: 2;
      max-width: none;
      background: none;
      box-shadow: none;
      text-align: center;
    }

    .grid__item-gender {
      grid-column-start: 1;
      grid-column-end: 3;
      grid-row-start: 2;
      grid-row-end: 3;
      justify-self: left;
    }

    .grid__item-age {
      grid-column-start: 3;
      grid-column-end: 5;
      grid-row-start: 2;
      grid-row-end: 3;
    }

    .grid__item-muscle {
      grid-column-start: 1;
      grid-column-end: 3;
      grid-row-start: 3;
      grid-row-end: 4;
    }

    .grid__item-pregnancy {
      grid-column-start: 3;
      grid-column-end: 5;
      grid-row-start: 3;
      grid-row-end: 4;
    }

    .grid__item-race {
      grid-column-start: 2;
      grid-column-end: 4;
      grid-row-start: 4;
      grid-row-end: 5;
    }
  }
}

@media screen and (max-width: 575px) {

  .header {
    padding: 50px 15px;

    .text__title {
      font-size: 48px;
    }
  }

  .main {
    padding: 24px;
  }

  .tips__text {
    padding: 5px 10px;
  }

  .grid {
    gap: 16px;
    grid-template-columns: repeat(1, 1fr);
    padding: 82px 0;

    .grid__item {
      max-width: none;
      display: flex;
      flex-direction: column;
      gap: 17px;
      padding: 32px;
      border-radius: 16px;
      background: var(--color-white, #fff);
      box-shadow: 16px 32px 56px 0 rgb(143 174 207 / 0.25);
    }

    .grid__item-text {
      grid-column-start: 1;
      grid-column-end: 2;
      grid-row-start: 1;
      grid-row-end: 2;
      max-width: none;
      background: none;
      box-shadow: none;
      text-align: center;
    }

    .grid__item-gender {
      grid-column-start: 1;
      grid-column-end: 2;
      grid-row-start: 2;
      grid-row-end: 3;
      justify-self: left;
    }

    .grid__item-age {
      grid-column-start: 1;
      grid-column-end: 2;
      grid-row-start: 3;
      grid-row-end: 4;
    }

    .grid__item-muscle {
      grid-column-start: 1;
      grid-column-end: 2;
      grid-row-start: 4;
      grid-row-end: 5;
    }

    .grid__item-pregnancy {
      grid-column-start: 1;
      grid-column-end: 2;
      grid-row-start: 5;
      grid-row-end: 6;
    }

    .grid__item-race {
      grid-column-start: 1;
      grid-column-end: 2;
      grid-row-start: 6;
      grid-row-end: 7;
    }
  }
}