@font-face {
  font-family: "PT Sans";
  src: url("../fonts/ptsans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PT Sans";
  src: url("../fonts/ptsans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

:root {
  --text-basic: #000000;
  --text-additional: #333333;
  --text-error: #ff5757;
  --transparent: transparent;

  --background-basic: #ffffff;
  --background-main: #82b3d3;
  --background-additional-1: #83b3d312;
  --background-additional-2: #83b3d320;

  --button-background-basic: #756157;
  --button-background-additional: #82b3d3;
  --button--background-selected: #7db54f;


  --input-border: #3f5e72;
  --elements-1: #e5e5e5e5;
  --elements-2: #f2f2f2;

  --font-size-main: 18px;
  --line-height-main: 21px;
  --font-size-heading-1: 60px;
  --line-height-heading-1: 78px;
  --font-size-heading-2: 24px;
  --line-height-heading-2: 28px;
  --font-size-buttons-text: 16px;
  --line-height-buttons-text:20px;
  --font-size-small: 20px;
  --line-height-small: 24px;
  --font-size-basic: 22px;
  --line-height-basic: 26px;
  --font-size-big: 30px;
  --line-height-big: 36px;
  --font-size-huge: 40px;
  --fonts-size-gigantic: 60px;
  --line-height-gigantic: 78px;
  --line-height-input: 23px;

  --first-tile: url("../images/photo-1.jpg");
  --last-tile: url("../images/photo-2.jpg");

  --background-index-hero: url("../images/index-background.jpg");
  --background-index-footer: url("../images/Subscribe.jpg");
  --background-catalog: url("../images/filter.jpg");
}

.page {
  font-family: "PT Sans", Arial, sans-serif;
  font-weight: 400;
  background-color: var(--background-basic);
  color: var(--text-basic);
  font-size: var(--font-size-main);
  line-height: var(--line-height-main);
}

.navigation__link {
  text-decoration: none;
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  color: inherit;
  font-weight: 700;
}

.button {
  text-decoration: none;
  font-size: var(--font-size-buttons-text);
  line-height: var(--line-height-buttons-text);
  color: var(--background-basic);
  background-color: var(--button-background-basic);
  font-weight: 700;
  text-transform: uppercase;
}

.button[type="submit"] {
  background-color: var(--button-background-additional);
  color: var(--background-basic);
}

.button[type="reset"] {
  background-color: var(--transparent);
  color: var(--background-basic);
}

.button--favourite {
  background-color: var(--button-background-additional);
}

.title {
  font-size: var(--font-size-heading-2);
  line-height: var(--line-height-heading-2);
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
}

.text {
  font-size: var(--font-size-basic);
  line-height: var(--line-height-basic);
  text-align: center;
}

.hero {
  position: relative;
  background-color: var(--background-additional-2);
  background-image: var(--background-index-hero);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  text-align: center;
}

.hero::after {
  position: absolute;
  content: "";
  background-image: url("../images/svg/divider.svg");
  background-repeat: no-repeat;
  bottom: 0;
  left: 0;
  background-size: 100%;
  width: 100%;
  height: 57px;
}

.hero__title {
  font-size: var(--font-size-heading-1);
  line-height: var(--line-height-heading-1);
}

.hero__image {
  width: 457px;
  height: 212px;
}

.hero__text {
  font-size: var(--font-size-basic);
  line-height: var(--line-height-basic);
}

.list__item:nth-child(odd) {
  background-color: var(--background-additional-2);
}

.list__item:nth-child(even) {
  background-color: var(--background-additional-1);
}

.list__item.list__item--darkback {
  background-color: var(--button-background-additional);
  color: var(--background-basic);
}

.list__item--decor:first-of-type,
.list__item--decor:last-of-type {
  height: 385px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
}

.list__item--decor:first-of-type {
  background-image: var(--first-tile);
}

list__item--decor:last-of-type {
  background-image: var(--last-tile);
}

.list__item-text {
  text-align: center;
}

.features__title {
  font-size: var(--font-size-heading-1);
  line-height: var(--line-height-heading-1);
}

.features__text {
  font-size: var(--font-size-basic);
  line-height: var(--line-height-basic);
}

.booking__title {
  font-size: var(--font-size-heading-1);
  line-height: var(--line-height-heading-1);
}

.mailing--index {
  background-color: var(--button-background-additional);
  color: var(--background-basic);
  background-image: var(--background-index-footer);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
}

.mailing__title {
  font-size: var(--font-size-big);
  line-height: var(--line-height-big);
}

.footer__call-us {
  text-decoration: none;
  color: inherit;
  font-size: var(--font-size-huge);
  line-height: var(--font-size-huge);
}

.footer__developer-img {
  width: 115px;
  line-height: 33px;
}

.catalog__wrapper {
  background-image: var(--background-catalog);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  color: var(--background-basic);
}

.catalog__title {
  font-size: var(--fonts-size-gigantic);
  line-height: var(--line-height-gigantic);
  text-align: left;
}

.breadcrumbs__link {
  color: var(--background-basic);
  text-decoration: none;
  font-size: var(--font-size-buttons-text);
}

.form__legend {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  font-weight: 700;
}

.checkbox__label,
.radiobuttons__label {
  line-height: var(--line-height-input);
}

.catalog__sorting-result-text,
.catalog__sorting-result {
  font-size: var(--font-size-heading-1);
  line-height: var(--line-height-heading-1);
}

.catalog__sorting-select {
  font-size: inherit;
  line-height: inherit;
}

.card__title {
  text-align-last: left;
}

.card__img {
  width: 300px;
  height: 212px;
}

.card__rating-img {
  width: 18px;
  height: 17px;
}

.card__rating {
  font-size: var(--font-size-buttons-text);
  line-height: var(--line-height-buttons-text);
  text-transform: uppercase;
}

.pagination__link {
  text-decoration: none;
  color: var(--background-basic);
  background-color: var(--button-background-additional);
  font-size: var(--font-size-small);
  line-height: var(--line-height-big);
}

.pagination__link--current {
  color: var(--text-basic);
  background-color: var(--elements-2);
}

.pagination__link--ellipsys {
  color: var(--text-basic);
  background-color: var(--);
}