From 5d3c76b7becf28a84d2bd1a2620ebc0df01749d1 Mon Sep 17 00:00:00 2001
From: Alina-1247 <arshavin.01997@gmail.com>
Date: Mon, 9 Dec 2024 21:56:07 +0300
Subject: [PATCH] Update styles.css

---
 styles/styles.css | 2488 ++++++++++++++++++++++-----------------------
 1 file changed, 1188 insertions(+), 1300 deletions(-)

diff --git a/styles/styles.css b/styles/styles.css
index 072c2a2..854ddd1 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -1,1524 +1,1412 @@
-html,
-body {
-    width: 100%;
-    height: 100%;
+@font-face {
+font-family: "PT-Sans";
+font-style: normal;
+font-weight: 400;
+src: url(../fonts/ptsans-400.woff2);
+font-display: swap;
+}
+@font-face {
+font-family: "PT-Sans";
+font-style: normal;
+font-weight: 700;
+src: url(../fonts/ptsans-700.woff2);
+font-display: swap;
+}
+
+/* BASIC */
+
+*,
+::before,
+::after {
+box-sizing: border-box;
+}
+
+.link:focus-visible,
+.button:focus-visible,
+.filter-form__label:focus-within .mark,
+.input:focus-visible,
+.quantity-button:focus-visible svg {
+outline: 3px solid #83B3D3;
+}
+
+html, body {
+height: 100%;
 }
 
 body {
-    position: relative;
-    margin: 0;
-    padding: 0;
-    font-family: "PT Sans", Arial, sans-serif;
-    font-size: 14px;
-    line-height: 26px;
-    font-weight: bold;
-    color: #333333;
-    text-transform: uppercase;
-    background-color: #f2f2f2;
-    overflow-x: hidden;
+display: flex;
+flex-direction: column;
+margin: 0;
+font-family: "PT-Sans", Helvetica, sans-serif;
+font-style: normal;
+font-size: 18px;
+font-weight: 400;
+line-height: 21px;
+color: #333;
+background-color: #f2f2f2;
 }
 
-a {
-    color: #000000;
-    text-decoration: none;
+.link {
+text-decoration: none;
+color: #000;
+}
+
+.link.is-current {
+pointer-events: none;
 }
 
 img {
-    max-width: 100%;
-    height: auto;
-}
-
-.visually-hidden:not(:focus):not(:active),
-input[type="checkbox"].visually-hidden,
-input[type="radio"].visually-hidden {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    margin: -1px;
-    border: 0;
-    padding: 0;
-    white-space: nowrap;
-    -webkit-clip-path: inset(100%);
-    clip-path: inset(100%);
-    clip: rect(0 0 0 0);
-    overflow: hidden;
-}
-
-.wrapper {
-    position: relative;
-    width: 1200px;
-    margin: 0 auto;
-    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .5);
-    box-shadow: 0 0 15px rgba(0, 0, 0, .5);
-    background-color: #ffffff;
+display: block;
 }
 
-.container {
-    width: 1056px;
-    margin: 0 auto;
+.list {
+margin: 0;
+padding: 0;
+list-style: none;
+}
+
+.title {
+color: #000;
+margin: 0;
+}
+
+.section-title {
+font-size: 30px;
+line-height: 36px;
+text-transform: uppercase;
+margin-bottom: 20px;
+}
+
+.custom-br {
+display: block;
 }
 
 .button {
-    display: inline-block;
-    vertical-align: top;
-    font: inherit;
-    text-align: center;
-    vertical-align: middle;
-    text-transform: uppercase;
-    border: none;
+display: inline-flex;
+justify-content: center;
+align-items: center;
+font-family: inherit;
+font-weight: 700;
+text-transform: uppercase;
+text-decoration: none;
+text-align: center;
+border-radius: 4px;
+padding-top: 8px;
+padding-bottom: 8px;
+border: 0;
+color: #fff;
+cursor: pointer;
+}
+
+.button--small {
+font-size: 16px;
+line-height: 20px;
+}
+
+.button--big {
+font-size: 20px;
+line-height: 36px;
+padding-left: 50px;
+padding-right: 50px;
+}
+
+.button--color-primary {
+background-color: #756157;
+}
+
+.button--color-primary:focus-visible {
+background-color: #615048;
+}
+
+.button--color-primary:hover {
+background-color: #615048;
+}
+
+.button--color-primary:active {
+background-color: #756157;
+color: rgba(255, 255, 255, .3);
+}
+
+.button--color-accent {
+background-color: #82B3D3;
+}
+
+.button--color-accent:focus-visible {
+background-color: #68A2CA;
+}
+
+.button--color-accent:hover {
+background-color: #68A2CA;
+}
+
+.button--color-accent:active {
+background-color: #82B3D3;
+color: rgba(255, 255, 255, .3);
+}
+
+.button:disabled {
+background-color: #e5e5e5;
+}
+
+.input,
+.select {
+font-family: inherit;
+font-style: normal;
+font-size: 18px;
+padding: 0 20px;
+}
+
+.input {
+border: 0;
+border-radius: 4px;
+background-color: #f2f2f2;
+}
+
+.input:focus-visible {
+background-color: #e6e6e6;
+}
+
+.input:hover {
+background-color: #e6e6e6;
+}
+
+.select {
+appearance: none;
+height: 48px;
+min-width: 292px;
+padding-right: 52px;
+border: 2px solid #e5e5e5;
+border-radius: 4px;
+background-color: transparent;
+background-image: url("../images/arrow-down.svg");
+background-repeat: no-repeat;
+background-position: calc(100% - 20px) center;
+color: #333;
+}
+
+.visually-hidden {
+position: absolute;
+width: 1px;
+height: 1px;
+margin: -1px;
+padding: 0;
+overflow: hidden;
+border: 0;
+clip: rect(0 0 0 0);
+}
+
+.page {
+width: 1200px;
+margin: 0 auto;
+box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.20);
+}
+
+.main-page, .inner-page {
+flex-grow: 1;
+}
+
+.container {
+width: 1090px;
+margin: 0 auto;
+padding: 0 15px;
+}
+
+.line {
+display: flex;
+flex-direction: column;
+}
+
+.page-header, .main-page,
+.inner-page, .page-footer {
+background-color: #fff;
 }
 
 .page-header {
-    background-color: #ffffff;
+position: sticky;
+top: 0;
+z-index: 1;
+border-bottom: 1px solid #fafafa;
 }
 
-.page-header-logo {
-    position: absolute;
-    left: 50%;
-    -webkit-transform: translateX(-50%);
-    -ms-transform: translateX(-50%);
-    transform: translateX(-50%);
+.wrapper-text {
+width: 680px;
+margin: auto;
+padding: 70px 0;
+text-align: center;
 }
 
-.site-navigation {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-    padding: 0;
-    margin: 0;
-    padding-top: 14px;
-    padding-bottom: 16px;
+.section-description {
+font-size: 22px;
+line-height: 26px;
+margin: 0;
 }
 
-.site-navigation li {
-    width: 200px;
-    -ms-flex-negative: 0;
-    flex-shrink: 0;
+/* INDEX */
+/* HEADER */
+
+.page-header .line {
+flex-direction: row;
 }
 
-.site-navigation li:nth-child(2) {
-    margin-right: 131px;
+.logo {
+flex: 0 0 140px;
+height: 64px;
+margin-right: 28px;
+z-index: 1;
 }
 
-.site-navigation li:nth-child(3) {
-    letter-spacing: 0.2px;
+.navigation {
+display: flex;
+flex: 1 1 auto;
 }
 
-.site-navigation li:nth-child(1),
-.site-navigation li:nth-child(2) {
-    text-align: left;
+.navigation-list {
+display: flex;
+flex-wrap: wrap;
 }
 
-.site-navigation li:nth-child(3),
-.site-navigation li:nth-child(4) {
-    text-align: right;
+.navigation-list__link {
+display: block;
+position: relative;
+padding: 20px 16px;
+font-size: 20px;
+font-weight: 700;
+line-height: 24px;
 }
 
-.site-navigation,
-.feauters-list {
-    list-style: none;
+.navigation-list--menu .link::after {
+content: "";
+display: block;
+position: absolute;
+left: 0;
+right: 0;
+bottom: -1px;
+height: 2px;
+margin: 0 16px;
+background-color: transparent;
+z-index: 1;
 }
 
-.site-navigation-link {
-    font-size: 14px;
-    line-height: 26px;
-    color: #000000;
+.navigation-list__link:hover {
+color: #756257;
 }
 
-.site-navigation-link:hover {
-    color: #81b3d2;
+.navigation-list--menu .link:hover::after {
+background-color: #756257;
 }
 
-.site-navigation-link:active {
-    color: rgba(0, 0, 0, 0.3);
+.navigation-list__link.is-current::after {
+background-color: #756257;
 }
 
-.site-navigation-link.active {
-    color: #716358;
+.navigation-list--user {
+justify-content: flex-end;
+flex: 1 0 135px;
+max-width: 135px;
+margin-right: 20px;
+margin-left: auto;
 }
 
-.promo-first {
-    width: 100%;
-    min-height: 508px;
-    background-image: url("../img/decor/intro-mask.svg"), url("../img/background/bg.jpg");
-    background-position: 0% 100.5%, center 28.5%;
-    background-repeat: no-repeat;
-    background-size: auto, cover;
-    background-color: #81b4d3;
+.navigation-list--user .navigation-list__link {
+display: inline-flex;
+padding: 22px 12px;
 }
 
-.promo-first img {
-    position: relative;
-    left: 371px;
-    top: 76px;
+.navigation-list__link--search:hover,
+.navigation-list__link--favorite:hover {
+color: #615048;
 }
 
-.header-promo {
-    width: 576px;
-    margin: 60px auto 51px auto;
-    padding: 0;
-    text-align: center;
+.navigation-list__link--search:active,
+.navigation-list__link--favorite:active {
+color: rgba(117, 97, 87, 0.3);
 }
 
-.header-title {
-    margin-bottom: 26px;
-    font-size: 21px;
-    line-height: 26px;
-    font-weight: 700;
-    color: #000000;
+.count {
+position: absolute;
+top: 10px;
+left: 20px;
+min-width: 20px;
+height: 20px;
+font-size: 10px;
+line-height: 20px;
+font-weight: 400;
+text-align: center;
+padding: 0 2px;
+color: #fff;
+background-color: #7db54f;
+border-radius: 20px;
+white-space: nowrap;
+text-overflow: ellipsis;
+overflow: hidden;
 }
 
-.title-promo {
-    font-size: 14px;
-    line-height: 26px;
-    font-weight: 400;
-    color: #333333;
-    letter-spacing: 0.1px;
+.navigation-button {
+display: flex;
+flex-direction: column;
+flex: 0 0 160px;
+gap: 14px;
+padding: 14px 0;
 }
+.navigation-button__link {
+width: 160px;
+}
+
+/* HERO */
 
-.advantages-list {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
+.hero {
+position: relative;
 }
 
-.advantage-item {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
-    margin: 0;
-    padding: 0;
+.hero::after {
+content: "";
+display: block;
+position: absolute;
+bottom: 0;
+height: 57px;
+width: 100%;
+background-image: url("../images/divider.svg");
 }
 
-.advantage-image img {
-    width: 600px;
-    height: 256px;
+.hero-welcome {
+padding-top: 50px;
+padding-bottom: 82px;
 }
-
-.blue {
-    width: 400px;
-    padding-top: 48px;
-    text-align: center;
-    background: #81b3d2;
-    color: white;
-}
-
-.blue h3 {
-    width: 160px;
-    margin: 0 auto;
-    margin-left: 122px;
-    margin-bottom: 24px;
-    font-size: 21px;
-    line-height: 21px;
-    font-weight: 700;
-}
-
-.blue p {
-    width: 302px;
-    padding-bottom: 21px;
-    margin: 0 auto;
-    font-size: 14px;
-    line-height: 21px;
-    text-align: center;
-    font-weight: 400;
-}
-
-.feature-list {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    background-color: #ffffff;
-}
-
-.feature-item {
-    width: 400px;
-    text-align: center;
-}
-
-.feature-item h4 {
-    position: relative;
-    margin-top: 160px;
-    padding: 0;
-    font-family: "PT Sans";
-    font-size: 21px;
-    font-weight: 700;
-    line-height: 21px;
-    color: #000000;
-}
-
-.feature-item p {
-    width: 288px;
-    margin: 0 auto;
-    margin-bottom: 82px;
-    font-family: "PT Sans";
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 20px;
-    color: #333333;
-}
-
-.feature-item.house h4::before {
-    content: "";
-    position: absolute;
-    top: -100px;
-    left: 162px;
-    height: 72px;
-    width: 75px;
-    display: block;
-    background-image: url("../img/icon/house.svg");
-    background-repeat: no-repeat;
-}
-
-.feature-item.food h4::before {
-    content: "";
-    position: absolute;
-    top: -100px;
-    left: 162px;
-    height: 72px;
-    width: 75px;
-    display: block;
-    background-image: url("../img/icon/food.svg");
-    background-repeat: no-repeat;
-}
-
-.feature-item.gift h4::before {
-    content: "";
-    position: absolute;
-    top: -104px;
-    left: 167px;
-    height: 76px;
-    width: 64px;
-    display: block;
-    background-image: url("../img/icon/gift.svg");
-    background-repeat: no-repeat;
-}
-
-.advantage-image img {
-    height: auto;
-    width: 100%;
-    display: block;
-}
-
-.advantage-list {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-    text-align: center;
-    background-color: #eeeeee;
-    list-style: none;
-}
-
-.more-advantage {
-    width: 400px;
-    text-align: center;
-    padding-bottom: 38px;
-}
-
-.more-advantage h3 {
-    width: 134px;
-    margin: 0 auto;
-    margin-bottom: 22px;
-    margin-top: 48px;
-    font-size: 21px;
-    line-height: 21px;
-    text-align: center;
-    font-weight: 700;
-    color: #000000;
-}
-
-.more-advantage p {
-    width: 264px;
-    margin: 0 auto;
-    margin-bottom: 22px;
-    font-size: 14px;
-    line-height: 21px;
-    text-align: center;
-    font-weight: 400;
-    color: #333333;
-}
-
-.search-question {
-    margin: 0 auto;
-    margin-bottom: 24px;
-    font-size: 30px;
-    font-weight: bold;
-    line-height: 36px;
-    text-align: center;
-    color: #000000;
+
+.hero-welcome {
+background-color: #81B3D3;
+background-image: url("../images/hero-bg.jpg");
+background-size: cover;
+background-position: center;
+background-repeat: no-repeat;
 }
 
-.search-date {
-    margin-bottom: 47px;
-    font-size: 14px;
-    font-weight: normal;
-    line-height: 24px;
-    text-align: center;
-    color: #333333;
-}
-
-.form-show {
-    display: block;
-    -webkit-animation-name: show;
-    animation-name: show;
-    -webkit-animation-duration: 2s;
-    animation-duration: 2s;
-}
-
-.hotel-button {
-    display: block;
-    width: 568px;
-    height: 86px;
-}
-
-.search-hotel {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -ms-flex-direction: column;
-    flex-direction: column;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-    margin: 0 auto;
-    padding: 0 73px;
-    padding-top: 50px;
-    background-color: #ffffff;
-}
-
-input[type="text"] {
-    background: #f2f2f2;
-    color: #000000;
-    text-transform: uppercase;
-}
-
-input[type="text"]::-webkit-input-placeholder {
-    color: #000000;
-}
-
-input[type="text"]:-ms-input-placeholder {
-    color: #000000;
-}
-
-input[type="text"]::-ms-input-placeholder {
-    color: #000000;
-}
-
-input[type="text"]::placeholder {
-    color: #000000;
-}
-
-.form-header {
-    padding-top: 13px;
-    font-size: 21px;
-    font-weight: bold;
-    line-height: 26px;
-    text-align: center;
-    color: #ffffff;
-}
-
-.form-title {
-    display: inline-block;
-    vertical-align: top;
-    width: 568px;
-    height: 86px;
-    background-color: #766357;
-}
-
-.form-title:hover {
-    background-color: #604e43;
-}
-
-.form-title:active {
-    background-color: #503e33;
-}
-
-.form-header:active {
-    color: rgba(255, 255, 255, 0.3);
-}
-
-.form {
-    position: relative;
-    overflow: hidden;
-}
-
-.form-search {
-    position: absolute;
-    top: 0;
-    left: 316px;
-    width: 512px;
-    padding-top: 55px;
-    padding-left: 56px;
-    font: inherit;
-    font-size: 14px;
-    font-weight: bold;
-    text-align: left;
-    color: #000000;
-    background-color: #ffffff;
-    -webkit-box-shadow: 0px 7px 15px 0 rgba(0, 1, 1, 0.15);
-    box-shadow: 0px 7px 15px 0 rgba(0, 1, 1, 0.15);
-    -webkit-transform: translateY(-100%);
-    -ms-transform: translateY(-100%);
-    transform: translateY(-100%);
-    -webkit-transition-property: -webkit-transform;
-    transition-property: -webkit-transform;
-    -o-transition-property: transform;
-    transition-property: transform;
-    transition-property: transform, -webkit-transform;
-    -webkit-transition-duration: 300ms;
-    -o-transition-duration: 300ms;
-    transition-duration: 300ms;
-    -webkit-transition-timing-function: ease;
-    -o-transition-timing-function: ease;
-    transition-timing-function: ease;
-}
-
-.form-search.is-showed {
-    -webkit-transform: translateY(0);
-    -ms-transform: translateY(0);
-    transform: translateY(0);
-}
-
-.form-search.no-js {
-    -webkit-transform: translateY(0);
-    -ms-transform: translateY(0);
-    transform: translateY(0);
-}
-
-@-webkit-keyframes shake {
-    0%,
-    100% {
-        -webkit-transform: translateX(0);
-        transform: translateX(0);
-    }
-    10%,
-    30%,
-    50%,
-    70%,
-    90% {
-        -webkit-transform: translateX(-10px);
-        transform: translateX(-10px);
-    }
-    20%,
-    40%,
-    60%,
-    80% {
-        -webkit-transform: translateX(10px);
-        transform: translateX(10px);
-    }
-}
-
-@keyframes shake {
-    0%,
-    100% {
-        -webkit-transform: translateX(0);
-        transform: translateX(0);
-    }
-    10%,
-    30%,
-    50%,
-    70%,
-    90% {
-        -webkit-transform: translateX(-10px);
-        transform: translateX(-10px);
-    }
-    20%,
-    40%,
-    60%,
-    80% {
-        -webkit-transform: translateX(10px);
-        transform: translateX(10px);
-    }
-}
-
-.submit-error {
-    -webkit-animation: shake 0.6s;
-    animation: shake 0.6s;
-}
-
-.form-body {
-    border: none;
-    margin: 0;
-    padding: 0;
-}
-
-.form-body p {
-    border: none;
-    margin: 0;
-    padding: 0;
-}
-
-.form-search-label-from {
-    display: inline-block;
-    vertical-align: top;
-    margin-right: 18px;
-    margin-top: 6px;
-    font-size: 14px;
-    line-height: 26px;
-    font-weight: 700;
-}
-
-.form-search-label-to {
-    display: inline-block;
-    vertical-align: top;
-    margin-right: 15px;
-    margin-top: 6px;
-    font-size: 14px;
-    line-height: 26px;
-    font-weight: 700;
-}
-
-.form-search-field {
-    width: 346px;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    padding: 9px 0;
-    padding-left: 14px;
-    margin-bottom: 30px;
-    max-height: 38px;
-    font-size: 14px;
-    line-height: 26px;
-    font: inherit;
-    background-color: #f2f2f2;
-    font-size: 14px;
-    font-weight: 700;
-    color: #000000;
-    border: none
-}
-
-.form-search-field:hover {
-    font: inherit;
-    background-color: #ebebeb;
-    font-size: 14px;
-    font-weight: bold;
-    color: #000000;
-}
-
-.form-search-field:focus {
-    font: inherit;
-    background-color: #ffffff;
-    font-size: 14px;
-    font-weight: bold;
-    color: #000000;
-}
-
-.form-search-calendar {
-    position: relative;
-    top: 6px;
-    right: 40px;
-    background-color: transparent;
-    fill: #cacaca;
-    border: none;
-}
-
-.form-search-calendar:hover {
-    fill: #000000;
-}
-
-.form-search-calendar:active {
-    font: inherit;
-    fill: #81b3d2;
+.hero-welcome__img {
+margin: 0 auto;
 }
 
-.humans {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-    margin: 0 auto;
-    margin-bottom: 54px;
-    margin-left: -2px;
-    width: 458px;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
+/* ADVANTAGES */
+
+.advantages-text {
+margin-bottom: 20px;
 }
 
-.humans .find-item {
-    margin: 0;
-    width: auto;
-}
-
-.find-item .input-number {
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    padding: 9px 0;
-    margin-left: auto;
-    max-height: 38px;
-    width: 346px;
-    text-transform: uppercase;
-    font-size: 14px;
-    color: #000000;
-    font-weight: 700;
-    background-color: #f2f2f2;
-    border: 2px solid #f2f2f2;
+.advantages-text__title {
+margin-bottom: 25px;
 }
 
-.find-item .input-adults {
-    margin-left: 39px;
-    padding-left: 23px;
-    padding-right: 23px;
-    width: 114px;
-    text-align: center;
+.advantages-grid__list {
+display: grid;
+grid-template-columns: repeat(3, 400px);
 }
 
-.find-item .input-children {
-    margin-left: 23px;
-    padding-left: 23px;
-    padding-right: 23px;
-    width: 114px;
-    text-align: center;
+.advantages-grid__item {
+background-color: rgba(131, 179, 211, 0.12);
 }
 
-.find-item input:hover {
-    background-color: #ebebeb;
-    border: 2px solid #ebebeb;
+.advantages-grid__item:nth-child(4n+3) {
+background-color: rgba(131, 179, 211, 0.20);
 }
 
-.find-item input:focus {
-    background-color: #ffffff;
-    border: 2px solid #e5e5e5;
+.advantages-grid__item .wrapper {
+width: 230px;
+text-align: center;
 }
 
-.find-item button {
-    width: 38px;
-    height: 38px;
-    -o-object-fit: contain;
-    object-fit: contain;
-    background-color: transparent;
-    fill: #cacaca;
-    border: none;
+.advantages-grid__text {
+display: flex;
+justify-content: center;
+align-items: center;
+width: 400px;
+min-height: 385px;
+height: 100%;
+padding: 75px 0;
 }
 
-.minus-adult {
-    position: absolute;
-    top: 191px;
-    left: 168px;
+.advantages-grid__title {
+font-size: 24px;
+line-height: 28px;
+text-transform: uppercase;
+margin-bottom: 30px;
 }
 
-.plus-adult {
-    position: absolute;
-    top: 191px;
-    left: 242px;
+.advantages-grid__description {
+margin: 0;
 }
 
-.minus-child {
-    position: absolute;
-    top: 191px;
-    left: 400px;
+.advantages-grid__description::before {
+content: "";
+display: block;
+position: relative;
+height: 2px;
+width: 60px;
+margin: 30px auto;
+background-color: #000;
+opacity: .3;
 }
 
-.plus-child {
-    position: absolute;
-    top: 191px;
-    left: 475px;
+.advantages-grid__item--image {
+grid-column: 1 / -1;
+display: flex;
+flex-wrap: wrap;
+background-color: #82B3D3;
+color: #fff;
 }
 
-.find-item button:hover {
-    fill: #000000;
+.advantages-grid__item--reverse {
+flex-direction: row-reverse;
 }
 
-.find-item button:active {
-    fill: #81b3d2;
+.advantages-grid__item--image .advantages-grid__title {
+color: #fff;
+}
+
+.advantages-grid__item--image .advantages-grid__description::before {
+background-color: #fff;
+}
+
+.advantages-grid__item--image img {
+object-fit: cover;
+margin: auto 0;
+min-height: 100%;
+}
+
+/* ADVANTAGES-SLOGAN */
+
+.advantages-slogan .wrapper-text {
+padding: 64px 0;
+}
+
+/* ADVANTAGES-SERVICE */
+
+.advantages-service__list {
+display: grid;
+grid-template-columns: repeat(3, 400px);
+}
+
+.advantages-service__content {
+display: flex;
+justify-content: center;
+align-items: center;
+width: 400px;
+min-height: 385px;
+height: 100%;
+padding: 75px 0;
+}
+
+.advantages-service__item .wrapper {
+width: 230px;
+text-align: center;
+}
+
+.advantages-service__item {
+background-color: rgba(131, 179, 211, 0.12);
+}
+.advantages-service__item:nth-child(even) {
+background-color: #fff;
+}
+
+.advantages-service__image {
+margin: auto;
+margin-bottom: 30px;
+}
+
+.advantages-service__title {
+font-size: 24px;
+line-height: 28px;
+text-transform: uppercase;
+margin-bottom: 30px;
+}
+
+.advantages-service__text {
+margin: 0;
+}
+
+/* SEARCH */
+
+.search .wrapper-text {
+padding: 96px 0;
+}
+
+.search-text__description {
+margin-bottom: 54px;
+}
+
+/* SUBSCRIBE */
+
+.subscribe {
+background-color: #68A2CA;
+background-image: url("../images/subscribe-bg.jpg");
+background-size: cover;
+background-position: center;
+background-repeat: no-repeat;
+color: #fff;
 }
 
-.search-button {
-    padding: 16px 0;
-    margin-bottom: 54px;
-    width: 458px;
-    font-size: 21px;
-    font-weight: bold;
-    font-style: normal;
-    font-stretch: normal;
-    line-height: normal;
-    letter-spacing: normal;
-    text-align: center;
-    text-transform: uppercase;
-    color: #ffffff;
-    background-color: #81b3d2;
-    border: none;
-    cursor: pointer;
+.subscribe .wrapper-text {
+padding: 96px 0 104px;
 }
 
-.search-button:hover {
-    background-color: #669ec0;
+.subscribe-text__title {
+color: #fff;
 }
 
-.search-button:active {
-    background-color: #5496bd;
-    color: rgba(255, 255, 255, 0.3)
+.subscribe-text__description {
+margin-bottom: 54px;
 }
 
+.subscribe-form {
+display: flex;
+}
+
+.subscribe-form__label {
+flex-grow: 1;
+}
+
+.subscribe-form__input {
+width: 100%;
+height: 100%;
+font-size: 18px;
+border-top-right-radius: 0;
+border-bottom-right-radius: 0;
+}
+
+.subscribe-form__button {
+max-width: 370px;
+border-top-left-radius: 0;
+border-bottom-left-radius: 0;
+}
+
+.inner-page .subscribe {
+background-color: #fff;
+background-image: none;
+color: #333;
+}
+
+.inner-page .subscribe-text__title {
+color: #333;
+}
+
+/* FOOTER */
+
 .page-footer {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    margin: 0 auto;
-    width: 1200px;
-    color: #000000;
-    background-color: rgba(255, 255, 255, 0.8);
-}
-
-.footer-container {
-    margin: 0 auto;
-    padding: 0 10px;
-}
-
-.page-footer .footer-container {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-pack: distribute;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-    padding-top: 36px;
-    padding-bottom: 39px;
-    padding-left: 15px;
-}
-
-.footer-hashtag {
-    width: 136px;
-    margin: 0;
-    margin-left: 118px;
-    margin-right: 253px;
-    color: #000000;
-    font-size: 21px;
-    line-height: 26px;
-    font-weight: 700;
-    text-align: center;
-}
-
-.footer-social {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-pack: distribute;
-    -webkit-box-pack: justify;
-    justify-content: space-between;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
+padding: 40px 0 30px;
+}
+
+.page-footer .line {
+flex-direction: row;
+justify-content: space-between;
+align-items: center;
+}
+
+.social {
+flex: 0 0 144px;
 }
 
 .social-list {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    margin: 0;
-    margin-right: 224px;
-    padding: 0;
-    width: 154px;
-    text-align: center;
-    list-style: none;
-}
-
-.social-list li {
-    margin-right: 6px;
-}
-
-.social-list li:nth-child(3n) {
-    margin: 0;
-}
-
-.social-button {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    width: 46px;
-    height: 48px;
-    color: #ffffff;
-    background-color: #81b3d2;
-    background-position: center;
-    text-indent: -9999px;
-}
-
-.social-button:hover {
-    background-color: #669ec0;
-    color: #ffffff;
-}
-
-.social-button:active {
-    background-color: #5496bd;
-    color: #ffffff;
-    opacity: 0.3;
-}
-
-.button-tw {
-    background-image: url("../img/icon/twitter.svg");
-    background-repeat: no-repeat;
-}
-
-.button-fb {
-    background-image: url("../img/icon/fb-icon.svg");
-    background-repeat: no-repeat;
-}
-
-.button-yt {
-    background-image: url("../img/icon/youtube.svg");
-    background-repeat: no-repeat;
-}
-
-.footer-coryright {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    width: 200px;
-    margin: 0;
-    color: #000000;
-    text-align: center;
-}
-
-.footer-coryright b {
-    margin-right: 8px;
-    font-size: 14px;
-    line-height: 26px;
-    font-weight: 400;
-    color: #000000;
-}
-
-.form-hotels {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: start;
-    -ms-flex-pack: start;
-    justify-content: flex-start;
-    margin: 0;
-    padding: 0;
+display: flex;
+flex-wrap: wrap;
+max-width: 150px;
+}
+
+.social-list__link {
+display: flex;
+justify-content: center;
+align-items: center;
+width: 48px;
+height: 40px;
+background-color: #fff;
+color: #83B3D3;
+}
+
+.social-list__link:hover {
+color: #68A2CA;
+}
+
+.social-list__link:focus-visible {
+color: #68A2CA;
+}
+
+.social-list__link:active {
+color: rgba(104, 162, 202, 0.3);
+}
+
+.contacts-address {
+display: flex;
+flex-direction: column;
+text-align: center;
+padding: 0 15px;
+}
+
+.contacts-address__phone {
+font-size: 40px;
+font-style: normal;
+line-height: 50px;
+}
+
+.contacts-address__phone:not(:last-child) {
+margin-bottom: 10px;
 }
 
+.contacts-address__phone:hover,
+.footer-logo__link:hover {
+color: #756157;
+}
+
+.contacts-address__phone:focus-visible,
+.footer-logo__link:focus-visible {
+color: #756157;
+}
+
+.contacts-address__phone:active,
+.footer-logo__link:active {
+color: rgba(117, 97, 87, 0.3);
+}
+
+/* CATALOG-PAGE */
+/* FILTER */
+/* FILTER-HEADER */
+
 .filter {
-    padding-top: 28px;
-    padding-left: 72px;
-    padding-bottom: 8px;
-    background-image: url("../img/background/filter-background.jpg");
-    background-position: center;
-    background-repeat: no-repeat;
-    background-color: #786966;
-}
-
-.filter-col,
-.filter-range-field {
-    margin: 0;
-    padding: 0;
-    border: none;
-    color: #ffffff;
-}
-
-.filter-col {
-    margin-right: 118px;
-}
-
-.filter-col ul,
-.hotel-sort ul {
-    margin: 0;
-    padding: 0;
-}
-
-.filter-col-infrastructure,
-.filter-col-house {
-    margin: 0;
-    padding: 0;
-    margin-bottom: 24px;
-    font-size: 16px;
-    line-height: 21px;
-    font-weight: 700;
-}
-
-.infrastructure li,
-.house li {
-    font-size: 14px;
-    line-height: 21px;
-    font-weight: 400;
-}
-
-.filter-option {
-    margin-left: 40px;
-    margin-bottom: 25px;
-}
-
-input[type="checkbox"]:focus+label {
-    outline: 2px ridge #81b3d2;
-}
-
-input[type="checkbox"]:disabled+label,
-input[type="checkbox"]:checked:disabled+label {
-    color: ;
-}
-
-.filter-option label {
-    position: relative;
-    display: block;
-    cursor: pointer;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
+padding: 35px 0 70px;
+background-color: #68A2CA;
+background-image: url("../images/filter-bg.jpg");
+background-size: cover;
+background-position: center;
+background-repeat: no-repeat;
+color: #fff;
+}
+
+.filter .line {
+align-items: stretch;
+}
+
+.filter-header {
+margin-bottom: 40px;
+}
+
+.filter-header__title {
+font-size: 60px;
+line-height: 78px;
+margin-bottom: 8px;
+color: #fff;
+}
+
+.filter-header__breadcrumbs {
+display: flex;
+align-items: center;
+}
+
+/* BREADCRUMBS */
+
+.breadcrumbs-list__item {
+display: flex;
+align-items: center;
+/* margin-right: 28px; */
+}
+
+.breadcrumbs-list__item:not(:last-child)::after {
+content: "";
+display: block;
+position: relative;
+height: 21px;
+width: 8px;
+margin: 0 11px;
+background-image: url("../images/arrow-right.svg");
+background-repeat: no-repeat;
+background-position: center;
+}
+
+.breadcrumbs-list__link {
+font-size: 16px;
+color: inherit;
+}
+
+.breadcrumbs-list__link--home {
+height: 21px;
+width: 13px;
+background-image: url("../images/breadcrumbs-home.svg");
+background-repeat: no-repeat;
+background-position: center;
+}
+
+.breadcrumbs-list__link:hover {
+opacity: 0.6;
+}
+
+.breadcrumbs-list__link:active {
+opacity: 0.3;
+}
+
+/* FILTER-FORM */
+
+.filter-form {
+display: flex;
+flex-wrap: wrap;
+gap: 70px;
+}
+
+.filter-form__group {
+display: flex;
+flex: 0 1 150px;
+margin: 0;
+padding: 0;
+border: 0;
+}
+
+.filter-form__title {
+font-size: 20px;
+font-weight: 700;
+line-height: 24px;
+padding: 0;
+margin-bottom: 32px;
+}
+
+.filter-form__item:not(:last-child) {
+margin-bottom: 16px;
+}
+
+.filter-form__label {
+display: flex;
+/* align-items: center; */
+gap: 16px;
+line-height: 23px;
+cursor: pointer;
+}
+
+.mark {
+flex: 0 0 20px;
+display: inline-flex;
+position: relative;
+width: 20px;
+height: 20px;
+margin-top: 2px;
+background-color: #fff;
+}
+
+.checkbox-mark {
+border-radius: 4px;
+}
+
+.checkbox:checked + .checkbox-mark {
+background-image: url("../images/checked.svg");
+background-repeat: no-repeat;
+background-position: center;
+}
+
+.filter-form__label:hover {
+opacity: .6;
+}
+
+.filter-form__label:active {
+opacity: .3;
+}
+
+.radio-mark {
+border-radius: 50%;
+}
+
+.radio-mark::before {
+content: "";
+position: absolute;
+left: 50%;
+top: 50%;
+transform: translate(-50%, -50%);
+width: 10px;
+height: 10px;
+border-radius: 50%;
+background-color: transparent;
+}
+
+.radio:checked + .radio-mark::before {
+background-color: #3F5E72;
+}
+
+.filter-form__group--price {
+flex-basis: 288px;
+margin-left: auto;
+}
+
+.filter-form__range {
+display: flex;
+flex-direction: column;
+}
+
+.range-inputs {
+display: flex;
+gap: 2px;
+margin-bottom: 44px;
+}
+
+.range-inputs__label {
+display: flex;
+align-items: center;
+padding: 12px 20px;
+background-color: #f2f2f2;
+}
+
+.range-inputs__label--min {
+border-top-left-radius: 4px;
+border-bottom-left-radius: 4px;
+}
+
+.range-inputs__label--max {
+border-top-right-radius: 4px;
+border-bottom-right-radius: 4px;
 }
 
-.filter-input-checkbox+label:before {
-    content: "";
-    position: absolute;
-    left: -39px;
-    top: 0;
-    width: 25px;
-    height: 25px;
-    background-image: url("../img/icon/checkbox-off.svg");
-    background-repeat: no-repeat;
-    background-position: 0 0;
+.range-inputs__label span {
+text-align: right;
+color: #000;
+opacity: 0.3;
 }
 
-.filter-input-checkbox:not(:disabled)+label:hover:before {
-    content: "";
-    position: absolute;
-    left: -39px;
-    top: 0;
-    width: 25px;
-    height: 25px;
-    background-image: url("../img/icon/checkbox-off.svg");
-    background-repeat: no-repeat;
-    background-position: 0 0;
+.range-inputs__label .input {
+width: 100%;
+font-weight: 700;
+line-height: 24px;
+padding: 0;
+margin-right: 12px;
+border-radius: 0;
+background-color: transparent;
 }
 
-.filter-input-checkbox:disabled+label:before {
-    content: "";
-    position: absolute;
-    left: -39px;
-    top: 0;
-    width: 25px;
-    height: 25px;
-    background-image: url("../img/icon/checkbox-disabled.svg");
-    background-repeat: no-repeat;
-    background-position: 0 0;
+.range-inputs__label .input:focus-visible {
+outline: none;
 }
 
-.filter-input-checkbox:checked+label:before {
-    content: "";
-    position: absolute;
-    left: -39px;
-    top: 0;
-    width: 25px;
-    height: 25px;
-    background-image: url("../img/icon/checkbox-on.svg");
-    background-repeat: no-repeat;
-    background-position: 0 0;
+.range-inputs__label:focus-within {
+background-color: #e6e6e6;
+outline: 3px solid #83B3D3;
 }
 
-.filter-input-checkbox:not(:disabled)+label:hover:before {
-    content: "";
-    position: absolute;
-    left: -39px;
-    top: 0;
-    width: 25px;
-    height: 25px;
-    background-image: url("../img/icon/checkbox-on.svg");
-    background-repeat: no-repeat;
-    background-position: 0 0;
-}
-
-.filter-input-checkbox:checked:disabled+label:before {
-    content: "";
-    position: absolute;
-    left: -39px;
-    top: 0;
-    width: 25px;
-    height: 25px;
-    background-image: url("../img/icon/checkbox-on-disabled.svg");
-    background-repeat: no-repeat;
-    background-position: 0 0;
+.range-inputs__label:hover {
+background-color: #e6e6e6;
 }
 
-.filter-range-field {
-    margin: 0 auto;
-    margin-left: 231px;
+.range-scale {
+background-color: rgba(255, 255, 255, .3);
 }
 
-.site-navigation-link.active {
-    color: #716358;
+.range-scale__bar {
+position: relative;
+height: 4px;
+background-color: #fff;
 }
-
-.button-link {
-    width: 115px;
-    height: 41px;
-    -o-object-fit: contain;
-    object-fit: contain;
-    color: #231f20;
-    text-decoration: none;
-}
-
-.button-link:hover,
-.button-link:focus {
-    fill: #81b3d2;
-}
-
-.button-link:active {
-    fill: #bdbbbc;
+
+.range-scale__toggle {
+position: absolute;
+width: 20px;
+height: 20px;
+top: -8px;
+border-radius: 5px;
 }
 
-.filter-range {
-    width: 320px;
-    color: #ffffff;
-    text-transform: uppercase;
+.range-scale__toggle--min {
+left: 0;
 }
 
-.filter-range-title {
-    margin-bottom: 9px;
-    margin-left: 1px;
-    font-weight: 600;
-    font-size: 16px;
-    line-height: 21px;
-}
-
-.price-controls {
-    position: relative;
-    height: 32px;
-    margin-bottom: 20px;
-    font-size: 0;
-    border: 2px solid #ffffff;
-    border-radius: 2px;
+.range-scale__toggle--max {
+right: 0;
 }
 
-.price-controls::after {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 2px;
-    height: 22px;
-    background: #ffffff;
-    -webkit-transform: translate(-50%, -50%);
-    -ms-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
+.range-scale__toggle:active {
+outline: 3px solid #83B3D3;
 }
 
-.price-controls label {
-    display: inline-block;
-    vertical-align: top;
-    font-size: 14px;
-    line-height: 31px;
-    vertical-align: top;
-    cursor: pointer;
+.filter-form__buttons {
+display: flex;
+flex-wrap: wrap;
+flex-direction: column;
+/* justify-content: flex-end; */
+margin-top: 56px;
 }
 
-.price-controls .min-price,
-.price-controls .max-price {
-    width: 80px;
-    padding-left: 65px;
+.filter-form__buttons .button {
+width: 192px;
 }
 
-.price-controls input {
-    width: 50px;
-    margin: 0;
-    color: inherit;
-    font: inherit;
-    background: none;
-    border: none;
+.submit {
+margin-bottom: 32px;
 }
 
-.range-controls {
-    position: relative;
-    margin-bottom: 32px;
+.button--color-transparent {
+background-color: transparent;
 }
 
-.range-controls .scale {
-    height: 2px;
-    background: rgba(255, 255, 255, 0.3);
+.button--color-transparent:hover {
+color: rgba(255, 255, 255, .3);
 }
 
-.range-controls .bar {
-    width: 80%;
-    height: 2px;
-    background: #ffffff;
+.button--color-transparent:active {
+color: rgba(255, 255, 255, .3);
 }
 
-.range-toggle {
-    position: absolute;
-    top: -9px;
-    width: 4px;
-    height: 4px;
-    background: #ababab;
-    border: 8px solid #ffffff;
-    border-radius: 50%;
-    cursor: pointer;
-    -webkit-box-shadow: 0 2px 1px 0 rgba(0, 1, 1, 0.2);
-    box-shadow: 0 2px 1px 0 rgba(0, 1, 1, 0.2);
+/* CATALOG-HEADER */
+
+.catalog-header {
+display: flex;
+align-items: center;
+margin-bottom: 40px;
 }
 
-.range-toggle:hover {
-    background: #1c4f80;
+.catalog-header__title {
+font-size: 30px;
+line-height: 36px;
+text-transform: uppercase;
+margin-right: auto;
 }
 
-.range-toggle-min {
-    left: 0;
+.catalog-header__sorting {
+margin-right: 70px;
 }
 
-.range-toggle-max {
-    left: 79%;
+.catalog-header__sorting:hover {
+border-color: #68A2CA;
 }
 
-.btn-transparent {
-    display: block;
-    margin: 0 auto;
-    margin-right: 100px;
-    padding: 6px;
-    padding-left: 33px;
-    padding-right: 33px;
-    width: 137px;
-    font-size: 14px;
-    line-height: 20px;
-    color: #ffffff;
-    text-transform: uppercase;
-    background: transparent;
-    border: 2px solid #ffffff;
-    border-radius: 2px;
-    cursor: pointer;
+.catalog-header__sorting:focus-visible {
+outline: #68a2ca;
+border: 2px solid #68a2ca;
 }
 
-.btn-transparent:hover {
-    color: #000000;
-    background: #ffffff;
+.catalog-header__sorting:disabled {
+color: rgba(0, 0, 0, 0.3);
+border-color: rgba(0, 0, 0, 0.3);
 }
 
-.filter-col ul,
-.hotel-sort ul {
-    list-style: none;
+.view-list {
+display: flex;
+flex-wrap: wrap;
+gap: 8px;
+flex: 1 0 160px;
+max-width: 160px;
 }
 
-.hotel-sort {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
-    padding-top: 30px;
-    padding-bottom: 30px;
-    padding-left: 71.5px;
-    padding-right: 71.5px;
-    background-color: #fefefe;
-    border-bottom: 1px solid #e5e5e5;
+.view-list__item {
+display: flex;
+flex-wrap: wrap;
 }
 
-.hotel-sort-list {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
+.view-list__button {
+display: flex;
+padding: 15px 14px;
+border: 2px solid #e5e5e5;
+border-radius: 4px;
+background-color: transparent;
+color: #000;
+cursor: pointer;
 }
 
-.hotel-sort-title {
-    margin-right: 48px;
-    font-size: 21px;
-    font-weight: bold;
-    line-height: 26px;
-    text-align: left;
-    color: #000000;
+.view-list__button.is-current {
+border-color: #000;
 }
 
-.hotel-sort-sorting {
-    margin: 0;
-    margin-right: 28px;
-    padding-top: 6px;
-    padding-right: 10px;
-    font-size: 12px;
-    line-height: 18px;
-    font-weight: 400;
-    text-align: left;
-    color: #000000;
+.view-list__button:hover {
+border-color: #000;
 }
 
-.hotel-sort-item {
-    margin-right: 34px;
+.view-list__button:focus-visible {
+outline: 2px #68a2ca;
+border-color: #68A2CA;
+}
+.field-group__input .input--number {
+width: 30px;
+padding: 0;
+text-align: center;
+border-radius: 0;
 }
 
-.hotel-sort-link {
-    font-size: 12px;
-    line-height: 18px;
-    font-weight: 400;
-    text-align: left;
-    color: rgba(0, 0, 0, 0.3);
+.input--number::-webkit-outer-spin-button,
+.input--number::-webkit-inner-spin-button {
+-webkit-appearance: none;
+margin: 0;
 }
 
-.hotel-sort-link:hover {
-    color: #81b3d2
+.input[type=number] {
+-moz-appearance: textfield;
 }
 
-.hotel-sort-link:active {
-    color: #000000;
+.field-group__input--quantity {
+flex-direction: row;
 }
 
-.hotel-sort-link.active {
-    color: #81b3d2
+.quantity-button {
+position: relative;
+padding: 0;
+width: 40px;
+height: 48px;
+border-radius: 0;
+background-color: #f2f2f2;
+color: #756157;
 }
 
-.hotel-sort-up {
-    position: absolute;
-    width: 11px;
-    height: 10px;
-    right: 96px;
-    fill: #cacaca;
+.quantity-button--less {
+border-top-left-radius: 4px;
+border-bottom-left-radius: 4px;
 }
 
-.hotel-sort-up:hover {
-    fill: #000000;
+.quantity-button--more {
+border-top-right-radius: 4px;
+border-bottom-right-radius: 4px;
 }
 
-.hotel-sort-up:active {
-    fill: #81b3d2;
+.quantity-button svg {
+opacity: .3;
 }
 
-.hotel-sort-down {
-    position: absolute;
-    width: 11px;
-    height: 10px;
-    right: 73px;
-    fill: #81b3d2;
+.quantity-button:focus-visible {
+outline: none;
 }
 
-.hotel-sort-down:hover {
-    fill: #000000;
+.quantity-button:focus-visible svg {
+border-radius: 4px;
+color: #000;
+opacity: 1;
 }
 
-.hotel-sort-down:active {
-    fill: #81b3d2;
+.quantity-button:hover svg {
+color: #000;
+opacity: 1;
 }
 
-.hotel {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -ms-flex-direction: column;
-    flex-direction: column;
+.quantity-button:active svg {
+color: #000;
+opacity: .2;
 }
 
-.hotel-item {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-align: start;
-    -ms-flex-align: start;
-    align-items: flex-start;
-    width: 1056px;
-    margin: 0;
-    padding-top: 25px;
-    padding-bottom: 30px;
-    padding-left: 73px;
-    padding-right: 73px;
-    border-bottom: 1px solid #e5e5e5;
+.alert {
+font-size: 16px;
+font-weight: 400;
+line-height: 21px;
+margin-top: 4px;
+margin-left: 20px;
 }
 
-.hotel-item img {
-    display: block;
-    margin-right: 30px;
-    margin-top: 5px;
+.alert--error {
+color: #FF5757;
 }
 
-.overview {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
-    width: 670px;
+.modal-content__button {
+grid-column: 1 / -1;
+padding-top: 18px;
+padding-bottom: 18px;
+margin-top: 25px;
+font-size: 20px;
+line-height: 24px;
+border-radius: 10px;
 }
 
-.overview h3 {
-    width: 100%;
-    margin: 0 auto;
-    padding-bottom: 5px;
-    font-size: 21px;
-    line-height: 26px;
-    font-weight: 700;
+/* TOOLTIP */
+
+.tooltip {
+position: relative;
+width: 26px;
+height: 26px;
+margin: 0 10px;
 }
 
-.overview>a {
-    width: 100%;
-    color: #000000;
-    font-size: 21px;
-    line-height: 26px;
-    font-weight: 700;
+.field-group__wrapper {
+display: flex;
+/* flex-wrap: wrap; */
+align-items: center;
+position: relative;
 }
 
-.overview>a:hover,
-.overview>a:focus {
-    color: #81b3d2;
+.tooltip-button {
+display: inline-flex;
+border: 0;
+padding: 0;
+margin: 0;
+background: transparent;
 }
 
-.overview a:active {
-    color: #cacaca;
+.tooltip-button:hover + .tooltip-text,
+.tooltip-button:focus + .tooltip-text {
+display: block;
 }
 
-.overview span {
-    vertical-align: top;
-    width: 78px;
-    color: #333333;
-    font-size: 14px;
-    line-height: 21px;
-    font-weight: 400;
+.tooltip-text {
+position: absolute;
+top: 100%;
+left: 50%;
+transform: translateX(-50%);
+width: 256px;
+padding: 15px 18px 18px 22px;
+margin-top: 15px;
+font-size: 16px;
+line-height: 20px;
+border-radius: 10px;
+background-color: #333;
+color: #fff;
+display: none;
 }
 
-.btn {
-    display: block;
-    margin: 0;
-    vertical-align: top;
-    padding: 3px 17px;
-    color: #ffffff;
-    font-size: 14px;
-    line-height: 21px;
-    font-weight: 700;
-    text-transform: uppercase;
-    text-align: center;
+.tooltip-text::before {
+content: "";
+display: block;
+width: 19px;
+height: 9px;
+position: absolute;
+bottom: 100%;
+left: 0;
+right: 0;
+margin: 0 auto;
+background-image: url("../images/tooltip-arrow.svg");
 }
+.view-list__button:active {
+border-color: #000;
+}
+
+/* PRODUCT */
 
-.more {
-    margin-right: 6px;
-    margin-top: 10px;
-    width: 76px;
-    background-color: #81b3d2;
+.catalog {
+padding: 50px 0 60px;
 }
 
-.more:hover,
-.more:focus {
-    background-color: #669ec0;
+.catalog-product {
+display: grid;
+grid-template-columns: repeat(3, 340px);
+gap: 20px;
+margin-bottom: 40px;
+padding-bottom: 40px;
+border-bottom: 1px solid #e6e6e6;
 }
-
-.more:active {
-    color: #94b9d2;
-    background-color: #5496bd;
+
+.card {
+display: flex;
+flex-direction: column;
+flex-grow: 1;
+height: 100%;
+padding: 20px;
+border: 1px solid #e6e6e6;
+border-radius: 4px;
 }
 
-.book {
-    width: 108px;
-    margin-top: 10px;
-    background-color: #766357;
-}
+.card-link {
+display: block;
+margin-bottom: 16px;
+}
+
+.card-link__image {
+margin-bottom: 16px;
+object-fit: contain;
+background-color: #f2f2f2;
+}
+
+.card-link__title {
+font-size: 24px;
+line-height: 28px;
+}
+
+.card-info {
+display: flex;
+justify-content: space-between;
+margin-bottom: 16px;
+}
+
+.card-info__text {
+flex-grow: 1;
+margin-right: 20px;
+}
+
+.card-info__price {
+max-width: 139px;
+font-weight: 400;
+text-align: right;
+}
+
+.card-buttons {
+display: grid;
+grid-template-columns: repeat(2, 1fr);
+column-gap: 20px;
+row-gap: 16px;
+margin-top: auto;
+}
+
+.card-buttons__favorite.is-current {
+background-color: #7DB54F;
+}
+
+.card-buttons__favorite.is-current:hover {
+background-color: #6C9E42;
+}
+
+.card-buttons__favorite.is-current:focus-visible {
+background-color: #6C9E42;
+}
+
+.card-buttons__favorite.is-current:active {
+background-color: #7DB54F;
+}
+
+.card-buttons__stars {
+background-image: url("../images/star.svg");
+background-repeat: repeat-x;
+background-position: left center;
+}
+
+.stars-4 {
+width: 90px;
+}
 
-.book:hover,
-.book:focus {
-    background-color: #604e43;
+.stars-3 {
+width: 66px;
 }
 
-.book:active {
-    color: #928a85;
-    background-color: #503e33;
+.stars-2 {
+width: 42px;
+}
+
+.card-buttons__rating {
+font-size: 16px;
+font-weight: 400;
+line-height: 20px;
+background-color: #F2F2F2;
+color: inherit;
+cursor: default;
+}
+
+/* PAGINATION */
+
+.pagination-list {
+display: flex;
+flex-wrap: wrap;
+gap: 8px;
+}
+
+.pagination-list__link {
+font-size: 20px;
+line-height: 36px;
+min-width: 60px;
+padding: 12px;
+background-color: #82B3D3;
+}
+
+.pagination-list__link.is-current,
+.pagination-list__link.is-more {
+color: inherit;
+cursor: default;
+}
+
+.pagination-list__link.is-more {
+background-color: #fff;
+}
+.pagination-list__link.is-current {
+background-color: #F2F2F2;
+}
+
+/* MODAL */
+
+.modal-container {
+position: fixed;
+top: 0;
+left: 0;
+width: 100%;
+height: 100%;
+background-color: rgba(242, 242, 242, 0.80);
+z-index: 2;
+display: none;
+}
+
+.modal-container--show {
+display: flex;
+}
+
+.modal {
+max-height: 100%;
+position: relative;
+margin: auto;
+padding: 64px 70px;
+border-radius: 30px;
+background-color: #ffffff;
+box-shadow: 0 25px 50px 0 rgba(0, 0, 0, 0.15);
+overflow: auto;
+}
+
+.modal::-webkit-scrollbar {
+height: 0;
+width: 0;
+background: transparent;
+}
+
+.modal-search {
+width: 717px;
+}
+
+.modal-close {
+position: absolute;
+top: 64px;
+right: 52px;
+padding: 16px;
+border-radius: 50%;
+background-color: #f2f2f2;
+}
+
+.modal-close:focus-visible {
+background-color: #e6e6e6;
+}
+
+.modal-close:hover {
+background-color: #e6e6e6;
+}
+
+.modal-close:active {
+background-color: #e6e6e6;
+}
+.modal-close:active svg {
+opacity: .3;
 }
 
-.rating {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -ms-flex-direction: column;
-    flex-direction: column;
-    -ms-flex-item-align: end;
-    align-self: flex-end;
-    -webkit-box-align: end;
-    -ms-flex-align: end;
-    align-items: flex-end;
+.modal-content__title {
+margin: 0;
+margin-bottom: 64px;
+padding-right: 40px;
 }
 
-.rating-stars {
-    height: 18px;
-    margin: 0;
-    margin-left: 138px;
-    margin-bottom: 46px;
-    background-image: url("../img/icon/stars.png");
-    background-repeat: repeat-x;
+.modal-content__form {
+display: grid;
+grid-template-columns: repeat(2, 1fr);
+column-gap: 83px;
+row-gap: 23px;
 }
 
-.star-4 {
-    width: 97px;
+.field-group {
+display: grid;
+grid-template-columns: 137px 1fr;
+position: relative;
 }
 
-.star-3 {
-    width: 72px;
+.modal-content__field--date {
+grid-column: 1 / -1;
 }
 
-.star-2 {
-    width: 47px;
+.field-group__label {
+display: block;
+padding: 12px 0;
+font-size: 20px;
+font-weight: 700;
+line-height: 24px;
+color: #000;
 }
 
-.rating-text {
-    padding: 3px 14px;
-    margin: 0 auto;
-    margin-right: 0;
-    margin-left: 110px;
-    color: #666666;
-    font-size: 14px;
-    line-height: 21px;
-    font-weight: 400;
-    background-color: #f2f2f2;
+.field-group__input {
+display: flex;
+flex-direction: column;
+flex-wrap: wrap;
+position: relative;
 }
 
-.inner-footer {
-    bottom: 0;
-    left: 0;
-    margin: 0 auto;
-    width: 1200px;
-    color: #000000;
-    background-color: rgba(255, 255, 255, 0.8);
+.field-group__input .input {
+max-width: 440px;
+height: 48px;
+font-weight: 700;
 }
 
-.inner-footer .footer-container {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-pack: distribute;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-    padding-top: 34px;
-    padding-bottom: 34px;
-    padding-left: 15px;
+.field-group__input .input--date {
+width: 100%;
+background-image: url("../images/date.svg");
+background-repeat: no-repeat;
+background-position: center right 20px;
+padding-right: 60px;
 }