@import "font.less";


@media (min-width: 0) {

    header {
        /*
        background-image: linear-gradient(var(--tr-blue-100), var(--tr-blue-100));
        background-size: 100% 80%;
         */

        height: 587px;
        background-image: url('../img/header-background-md.png');
        background-position: center;
        background-size: auto;
        background-repeat: no-repeat;
    }

    /** --------------------- Search-Block Mobile ------------------------ **/

    .search-block {
        margin-top: 80px;
    }

    .search-block__title {
        color: var(--tr-color-white);
        text-transform: uppercase;
        text-align: center;

        .H1-mobile;
    }

    .search-block__subtitle {
        color: var(--tr-color-white);
        width: 258px;
        margin: 12px auto 0 auto;
        text-align: center;
        .M-medium-mobile;
    }

    .search-block__subtitle span {
        color: var(--tr-color-green-100);
    }

    .search-block__form {
        margin: 25px auto 0 auto;
        padding: 12px;
        border-radius: 12px;

        background-color: #ffffff;

        display: flex;
        flex-direction: column;

        width: 343px;

        box-shadow: 0 4px 4px 4px rgba(0, 0, 0, 0.05);
    }

    .search-block__form i {
        color: var(--tr-color-blue-100);
        font-size: 20px;
        position: absolute;
        top: calc(50% - 15px);
        left: 16px;
    }

    .search-block__form input {
        width: 100%;
        border-radius: 100px;
        border: 1px solid var(--tr-color-blue-70);
        padding: 16px 16px 16px 43px;
        .M-regular-mobile;
    }


    .search-block__form input::placeholder {
        color: var(--tr-color-gray-60);
        .M-regular-mobile;
    }

    .search-block__form input:focus {
        outline: none;
        border: 1px solid var(--tr-color-gray-70);
    }

    .search-block__form-place {
        width: 100%;
        position: relative;
    }

    .search-block__form-date {
        width: 100%;
        margin-top: 8px;
        position: relative;
    }

    .search-block__form-button {
        width: 100%;
        margin-top: 8px;
        border-radius: 100px;
        padding-top: 15px;
        padding-bottom: 15px;
        .M-regular-mobile;
    }

    /** --------------------- Authors-Tours Mobile ------------------------ **/

    .authors-tours {
        margin: 64px 16px 0 16px;
        padding: 32px 24px 32px 24px;
        border-radius: 10px;
        background-color: var(--tr-color-blue-100);
    }

    .authors-tours__title {
        color: var(--tr-color-white);
        text-transform: uppercase;
        .H1-mobile;
    }

    .authors-tours__title span {
        color: var(--tr-green-100);
    }

    .authors-tours__button {
        display: none;
    }

    .authors-tours__button2 {
        margin-top: 32px;
    }

    .authors-tours__button2 a {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .authors-tours__banner {
        margin-top: 24px;
        color: var(--tr-color-white);
    }

    .authors-tours__banner:first-child {
        margin-top: 32px;
    }

    .authors-tours__banner-icon {
        display: inline-block;
        margin-right: 12px;
        font-size: 24px;
        line-height: 24px;
        color: var(--tr-green-100);
        vertical-align: middle;
    }

    .authors-tours__banner-title {
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        .M-medium-mobile;
    }

    .authors-tours__banner-text {
        margin-top: 10px;
        .M-regular-mobile;
    }

    /** --------------------- Tour-Sell Mobile ------------------------ **/

    .tour-sell {
        margin: 64px 16px 0 16px;
        min-height: 694px;
        background-image: url('../img/tour-sell-mobile.png');
        background-position: bottom;
        background-repeat: no-repeat;
    }

    .tour-sell__title {
        text-transform: uppercase;
        .H1-mobile;
    }

    .tour-sell__title span {
        color: var(--tr-blue-100);
    }

    .tour-sell__description {
        margin-top: 12px;
    }

    .tour-sell__description-text {
        .M-regular-mobile;
    }

    .tour-sell__description-buttons {
        margin-top: 453px;
    }

    .tour-sell__description-buttons a {
        display: block;
        padding-top: 15px;
        padding-bottom: 15px;
        .M-regular-mobile;
    }

    /** --------------------- Tour-Categories Mobile ------------------------ **/

    .tour-categories {
        display: none;
    }

    .tour-categories-mobile {
        margin: 64px 16px 0 16px;
    }

    .tour-categories-mobile__title {
        text-transform: uppercase;
        .H1-mobile;
    }

    .tour-categories-mobile__link {
        color: var(--tr-blue-100);
        .M-regular-mobile;
    }

    .tour-categories-mobile__link a {
        text-decoration: none;
    }

    .tour-categories-mobile__nav-block {
        margin-top: 16px;
    }

    .tour-categories-mobile__description {
        .M-regular-mobile;
    }

    .tour-categories-mobile__image {
        margin-top: 12px;
        height: 280px;

        background-repeat: no-repeat;
        background-size: cover;

        border-radius: 10px;
        padding: 20px 16px 20px 16px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .tour-categories-mobile__image-title {
        .H3-extra-bold-mobile;
        color: var(--tr-color-white);
    }

    .tour-categories-mobile__image-description {
        margin-top: 8px;
        .M-regular-mobile;
        color: var(--tr-color-white);
    }

    .tour-categories-mobile__image-button {
        margin-top: 10px;
        .H5-mobile;
    }

    .tour-categories-mobile__image-button a {
        padding: 3px 11px 3px 11px;
        .H5-mobile;
    }

    .tour-categories-mobile__nav {
        font-size: 32px;
        line-height: 32px;
    }

    /** --------------------- Tour-Feed Mobile ------------------------ **/

    .tour-feed {
        margin: 64px 16px 0 16px;
    }

    .tour-feed__header {
        display: none;
    }

    .tour-feed__title__mobile {
        text-transform: uppercase;
        .H1-mobile;
    }

    .tour-feed__title__mobile span {
        color: var(--tr-blue-100);
    }

    .tour-feed__tours {
        margin-top: 0;
    }

    .tour-feed__button-bottom {
        margin-top: 32px;
    }

    .tour-feed__link__mobile {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding-bottom: 4px;
        .M-regular-mobile;
    }

    .tour-feed__button-bottom a {
        width: 100%;
        padding-top: 15px;
        padding-bottom: 15px;
        .M-desktop;
    }
}



@media (min-width: 768px) {

    header {
        height: 750px;
        background-image: url('../img/header-background-md.png');
        background-position: center;
        background-size: auto;
    }

    /** --------------------- Search-Block Tablet ------------------------ **/

    .search-block {
        margin-top: 140px;
    }

    .search-block__title {
        .H2-desktop;
    }

    .search-block__subtitle {
        width: auto;
        margin: 0 auto 0 auto;
        .M-desktop-semi-bold;
    }

    .search-block__form {
        margin: 56px auto 0 auto;
        padding: 28px;
        border-radius: 32px;
        width: 506px;

        box-shadow: none;
    }

    .search-block__form i {
        font-size: 24px;
        position: absolute;
        top: calc(50% - 17px);
        left: 24px;
    }

    .search-block__form input {
        padding: 13px 13px 13px 54px;
        .M-desktop;
    }

    .search-block__form input::placeholder {
        .M-desktop;
    }

    .search-block__form-button {
        width: 100%;
        margin-top: 8px;
        border-radius: 100px;
        .M-medium-desktop;
    }

    /** --------------------- Authors-Tours Tablet ------------------------ **/

    .authors-tours {
        margin: 80px 12px 0 12px;
        padding: 48px 32px 48px 32px;
        border-radius: 12px;
    }

    .authors-tours__title {
        text-transform: uppercase;
        .H2-desktop;
    }

    .authors-tours__button {
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
    }

    .authors-tours__button2 {
        display: none;
    }

    .authors-tours__banner {
        margin-top: 40px;
        padding-right: 40px;
    }

    .authors-tours__banner:first-child {
        margin-top: 40px;
    }

    .authors-tours__banner-icon {
        display: block;
        font-size: 52px;
        line-height: 52px;
    }

    .authors-tours__banner-title {
        display: block;
        margin-top: 12px;
        .M-desktop-semi-bold;
    }

    .authors-tours__banner-text {
        margin-top: 12px;
        .M-desktop;
    }

    /** --------------------- Tour-Sell Tablet ------------------------ **/

    .tour-sell {
        margin: 80px 12px 0 12px;
        min-height: 732px;
        background-image: url('../img/tour-sell-tablet.png');
    }

    .tour-sell__title {
        .H2-desktop;
    }

    .tour-sell__description {
        margin-top: 32px;
    }

    .tour-sell__description-text {
        .M-desktop;
    }

    .tour-sell__description-buttons {
        margin-top: 28px;
    }

    .tour-sell__description-buttons a {
        display: inline-block;
        padding-top: 11px;
        padding-bottom: 11px;
        .M-desktop;
    }

    /** --------------------- Tour-Categories Tablet ------------------------ **/

    .tour-categories {
        display: block;
        margin: 80px 12px 0 12px;
    }

    .tour-categories-mobile {
        display: none;
    }

    .tour-categories__title {
        text-transform: uppercase;
        .H2-desktop;
    }

    .tour-categories__title span {
        color: var(--tr-blue-100);
    }

    .tour-categories__tiles {
        margin-top: 40px;
    }

    .tour-categories__tile__big {
        display: none;
    }

    .tour-categories__tile-title {
        .L-bold-desktop;
        color: var(--tr-color-white);
    }

    .tour-categories__tile-description {
        margin-top: 10px;
        color: var(--tr-color-white);
        .M-desktop;
    }

    .tour-categories__tile {
        height: 258px;
        border-radius: 12px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    /** --------------------- Tour-Feed Tablet ------------------------ **/

    .tour-feed {
        margin: 64px 12px 0 12px;
    }

    .tour-feed__header {
        display: flex;
    }

    .tour-feed__header__mobile {
        display: none;
    }

    .tour-feed__title {
        text-transform: uppercase;
        .H3-desktop;
    }

    .tour-feed__title span {
        color: var(--tr-blue-100);
    }

    .tour-feed__tours {
        margin-top: 16px;
    }

    .tour-feed__button-bottom {
        margin-top: 40px;
        text-align: center;
    }

    .tour-feed__button-bottom a {
        width: auto;
        padding-top: 11px;
        padding-bottom: 11px;
    }

}



@media (min-width: 1200px) {

    header {
        height: 480px;
        background-image: url('../img/header-background-xl.png');
    }

    /** --------------------- Search-Block Desktop ------------------------ **/

    .search-block {
        margin-top: 80px;
    }

    .search-block__title {
        .H1-desktop;
    }

    .search-block__form {
        margin: 40px auto 0 auto;
        padding: 8px;
        border-radius: 70px;

        flex-direction: row;

        height: 68px;
        width: 762px;
    }

    .search-block__form i {
        font-size: 24px;
        top: calc(50% - 17px);
        left: 23px;
    }

    .search-block__form input {
        padding: 15px 15px 15px 54px;
    }

    .search-block__form-place {
        width: 50%;
        margin-right: 8px;
        position: relative;
    }

    .search-block__form-date {
        width: 50%;
        margin-top: 0;
        margin-right: 8px;
        position: relative;
    }

    .search-block__form-button {
        margin-top: 0;
        padding-top: 13px;
        padding-bottom: 13px;
        flex-shrink: 0;
        width: 179px;
        border-radius: 100px;
        .M-desktop-semi-bold;
    }

    /** --------------------- Authors-Tours Desktop ------------------------ **/

    .authors-tours {
        margin: 140px 0 0 0;
    }

    .authors-tours__title {
        text-transform: none;
        .H1-desktop;
    }

    .authors-tours__button {
        align-items: center;
    }

    .authors-tours__banner {
        margin-top: 60px;
        padding-right: 24px;
    }

    .authors-tours__banner:first-child {
        margin-top: 60px;
    }

    .authors-tours__banner-title {
        margin-top: 12px;
        .M-desktop-semi-bold;
    }

    .authors-tours__banner-text {
        margin-top: 14px;
        .M-desktop;
    }

    /** --------------------- Tour-Sell Desktop ------------------------ **/

    .tour-sell {
        margin: 140px 0 0 0;
        min-height: 562px;
        background-image: url('../img/tour-sell-desktop.png');
    }

    .tour-sell__description {
        margin-top: 24px;
    }

    .tour-sell__description-buttons {
        margin-top: 0;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
    }

    /** --------------------- Tour-Categories Desktop ------------------------ **/

    .tour-categories {
        margin: 140px 0 0 0;
    }

    .tour-categories__tiles {
        margin-top: 60px;
    }

    .tour-categories__tile__big {
        height: 584px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .tour-categories__tile-title {
        .H1-mobile;
    }

    .tour-categories__tile-description {
        .M-medium-desktop;
    }

    .tour-categories__tile {
        height: 280px;
    }

    /** --------------------- Tour-Feed Desktop ------------------------ **/

    .tour-feed {
        margin: 100px 0 0 0;
    }

    .tour-feed__title {
        text-transform: none;
        .H2-desktop;
    }

    .tour-feed__tours {
        margin-top: 36px;
    }

    .tour-feed__button-bottom {
        margin-top: 60px;
    }

}

@media (min-width: 1400px) {

    header {
        background-image: url('../img/header-background-xxl.png');
    }

}