@font-face {
    font-family: "IvyPresto Headline";
    src: url("../fonts/IvyPrestoHeadline-Light.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

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

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

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

:root {
    --color-primary: #202C46;
    --color-gold: #C5A75F;
    --color-gold-hover: #A98D4E;
    --color-primary-hover: #2C3C60;
    --color-white: #FFFFFF;
    --color-black: #101111;
    --color-background: #FFFFFF;
    --color-background-secondary: #E8DBCA;
    --color-field-neutral: #A7A7A7;
    --color-error: #C73535;
    --gradient-gold: linear-gradient(116deg, #E0BF7D 0%, #B18E50 48%, #826838 100%);
    --gradient-primary: linear-gradient(135deg, #202948 0%, #111528 100%);

    --font-display: "IvyPresto Headline", Georgia, serif;
    --font-heading: var(--font-display);
    --font-main: "Inter", sans-serif;

    --container-width: 1320px;
    --wide-container-width: 1480px;
    --tablet-wide-container-width: 900px;
    --container-padding: 20px;
    --hero-content-width: clamp(1160px, calc(33.3333vw + 680px), 1320px);

    --fs-home-display-lg: 54px;
    --fs-home-display-md: 40px;
    --fs-home-display-sm: 35px;
    --fs-home-card-lg: 28px;
    --fs-home-card: 20px;
    --fs-home-body-lg: 16px;
    --fs-home-body-sm: 14px;
    --fs-home-label: 14px;
    --fs-home-eyebrow: 20px;
    --fs-home-control: 14px;
    --lh-home-body: 1.22;
    --lh-home-card-body: 1.18;
}

@media (min-width: 1600px) {
    :root {
        --fs-home-display-lg: 60px;
        --fs-home-display-md: 44px;
        --fs-home-display-sm: 37px;
        --fs-home-card-lg: 30px;
        --fs-home-card: 21px;
        --fs-home-body-lg: 17px;
        --fs-home-body-sm: 15px;
        --fs-home-label: 15px;
        --fs-home-control: 15px;
    }
}

@media (min-width: 2200px) {
    :root {
        --fs-home-display-lg: 68px;
        --fs-home-display-md: 48px;
        --fs-home-display-sm: 40px;
        --fs-home-card-lg: 32px;
        --fs-home-card: 22px;
        --fs-home-body-lg: 18px;
        --fs-home-body-sm: 16px;
        --fs-home-label: 16px;
        --fs-home-control: 16px;
    }
}

@media (max-width: 767px) {
    :root {
        --fs-home-body-mobile: clamp(15px, 4.45vw, 17px);
        --lh-home-body-mobile: 1.25;
    }
}

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

.container {
    width: min(var(--container-width), calc(100% - (2 * var(--container-padding))));
    margin-inline: auto;
}

.room-card-title__beds {
    display: block;
}

html {
    scroll-behavior: smooth;
}

.is-slider-draggable {
    touch-action: pan-y;
    cursor: grab;
}

.is-slider-draggable :is(a, button) {
    cursor: pointer;
}

.is-slider-draggable.is-dragging {
    cursor: grabbing;
    user-select: none;
}

.is-slider-draggable.is-dragging * {
    cursor: grabbing;
    user-select: none;
}

.is-slider-draggable img {
    -webkit-user-drag: none;
}

.swiper-horizontal {
    touch-action: pan-y;
}

.swiper-horizontal img {
    -webkit-user-drag: none;
}

.home-offers__slider.is-dragging .home-offers__track {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .home-offers__track {
        transition-duration: 0.01ms;
    }
}

body {
    margin: 0;

    color: var(--color-black);
    background: var(--color-background);

    font-family: var(--font-main);
}

body.menu-open {
    overflow: hidden;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
}

.site-main {
    width: 100%;
    overflow: hidden;
}