@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700');

:root {
    --col-beige-neutral: #F3EFE6;
    --col-orange-accent: #FF5D28;
    --col-dark-brown: #312A17;
    --col-back: #F5F5F5;
    --col-secondary: #928C7E;

    --bg: #312A17;
    --fg: #F3EFE6;
    --bg1: #FFFDFA;
    --fg1: #312A17;

    --menu-icon-filter: none;
}

/* Icons */
.icon-ig {
    display: inline-block;
    width: 3.75rem;
    height: 3.75rem;
    background: url('images/icons/ig.svg');
    background-size: cover;
}

.icon-fb {
    display: inline-block;
    width: 3.75rem;
    height: 3.75rem;
    background: url('images/icons/fb.svg');
    background-size: cover;
}

.icon-menu {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    background: url('images/icons/menu.svg');
    background-size: cover;
    filter: var(--menu-icon-filter);
}

.dark {
    --menu-icon-filter: invert();
}

a,
a:visited {
    color: inherit;
    text-decoration: none;
}

/* Common text styles */
h1,
h2,
h3,
h4,
h5,
p {
    margin: 0;
}

h1,
h2,
h3,
h4,
h5 {
    color: var(--headers-color)
}

@media only screen and (min-width: 1280px) {
    .hide-on-desktop {
        display: none !important;
    }
}

@media only screen and (max-width: 1279px) {
    .hide-on-mobile {
        display: none !important;
    }
}

@media only screen and (min-width: 1280px) {
    .page-padding {
        padding-left: 10rem;
        padding-right: 10rem;
    }
}

@media only screen and (max-width: 1279px) {
    .page-padding {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

@media only screen and (max-width: 1279px) {}

/* Mobile */
@media only screen and (max-width: 1279px) {
    body {
        font-family: 'Inter';
        font-size: 1rem;
    }

    h1 {
        font-size: 2.5rem;
        font-weight: 700;
    }

    h2 {
        font-size: 1.75rem;
        font-weight: 600;
    }

    h3 {
        font-size: 1.5rem;
        font-weight: 500;
    }

    h4 {
        font-size: 1.5rem;
        font-weight: 600;
    }

    h5 {
        font-size: 1.125rem;
        font-weight: 600;
    }

    .font-body {
        font-size: 1rem;
        font-weight: 400;
    }

    .font-tag {
        font-size: 0.875rem;
        font-weight: 600;
    }

    .large-text {
        font-size: 1.125rem;
        font-weight: 600;
    }
}

/* Desktops */
@media only screen and (min-width: 1280px) {
    body {
        font-family: 'Inter';
        font-size: 1.125rem;
    }

    .text-large {
        font-size: 1.5rem;
    }

    h1 {
        font-size: 5rem;
        font-weight: 700;
    }

    h2 {
        font-size: 3.375rem;
        font-weight: 700;
    }

    h3 {
        font-size: 2.25rem;
        font-weight: 600;
    }

    :root {
        --font-size-h2: 3.375rem;
        --font-weight-h2: 700;

        --font-size-h3: 2.25rem;
        --font-weight-h3: 600;

        --font-size-h4: 1.5rem;
        --font-weight-h4: 600;
    }

    h4 {
        font-size: 1.5rem;
        font-weight: 600;
    }

    .large-text {
        font-size: 1.5rem;
        font-weight: 500;
    }
}

.dark {
    --logo-url: url("images/logo_light.svg");
}
/* Hack: room body is light, but the logo is also light because of the gradient 
   on the main picture */
@media only screen and (max-width: 1279px) {
.light.room-body { 
    --logo-url: url("images/logo_light.svg");
}
}
.light {
    --logo-url: url("images/logo_dark.svg");
}
.logo {
    content: var(--logo-url);
    width: 11.75rem;
    height: 3.5rem;
}

.dark {
    color: var(--col-beige-neutral);
    background-color: var(--col-dark-brown);
    --headers-color: var(--col-beige-neutral)
}

.light {
    background-color: var(--col-back);
    --headers-color: var(--col-dark-brown)
}

.button {
    background: var(--col-orange-accent);
    color: var(--col-beige-neutral);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.button.button-dark {
    background: var(--col-dark-brown)
}

a.button {
    /* For higher specificity than the a:visited selector above */
    color: var(--col-beige-neutral);
}

@media only screen and (max-width: 1279px) {
    .button {
        font-size: 1.25rem;
        font-weight: 600;
        border-radius: 0.5rem;
        padding: 0.625rem 2rem;
    }
}

@media only screen and (min-width: 1280px) {
    .button {
        font-size: 1.5rem;
        font-weight: 500;
        border-radius: 0.75rem;
        padding: 1rem 4rem;
    }
}

.page-block {
    min-height: 52.75rem;
}

@media only screen and (min-width: 1280px) {
    .index-block {
        width: 90rem;
        max-width: 90rem;
        box-sizing: border-box;
    }
}

@media only screen and (max-width: 1279px) {
    .bg-element {
        border-radius: 0 0 1rem 1rem;
    }
}

/* Main page */

body {
    margin: 0;
}

@media only screen and (min-width: 1280px) {
    body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 7.5rem;
    }

    .main-bg {
        background: linear-gradient(120.5deg, rgba(0, 0, 0, 0.78) 6.8%, rgba(0, 0, 0, 0) 111.12%), url('images/index/main.jpg') no-repeat;
        background-size: cover;
        background-position: center;
        width: 100vw;
        min-height: 64rem;
        max-width: 90rem;
        border-radius: 0 0 1.25rem 1.25rem;
    }

    .main-page {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-left: 10rem;
    }

    .main-page h1 {
        margin-top: 11.25rem;
        max-width: 52.75rem;
    }

    .main-page h3 {
        margin-top: 2rem;
        max-width: 36.5rem;
    }

    .main-page .button {
        margin-top: 4rem;
    }
}

@media only screen and (max-width: 1279px) {
    body {
        display: flex;
        flex-direction: column;
        gap: 5rem;
    }

    .main-bg {
        background: linear-gradient(344.84deg, rgba(0, 0, 0, 0.624) 35.56%, rgba(49, 42, 23, 0) 110.68%), url('images/index/main.jpg') no-repeat;
        background-size: cover;
        background-position: top left, top right -100px;
    }

    .main-page {
        padding-top: 22.5rem;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .main-page h3 {
        margin-top: 1.5rem;
        margin-bottom: 3rem;
    }

    .main-page .button {
        flex-grow: 0;
    }
}

/* Wilkommen page */
@media only screen and (max-width: 1279px) {
    .wilkommen-page {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .wilkommen-page h2 {
        align-self: flex-start;
    }

    .wilkommen-page img {
        align-self: stretch;
        object-fit: cover;
        height: 25rem;
        border-radius: 0.5rem;
        margin-top: 2rem;
        margin-bottom: 1rem;
    }

    .wilkommen-page p {
        margin-top: 1rem;
    }
}

@media only screen and (min-width: 1280px) {
    .wilkommen-page {
        display: grid;
        grid:
            "image title"
            "image content";
        grid-template-rows: 0.47fr 0.53fr;
        grid-template-columns: 704px auto;
        column-gap: 3.5rem;
    }

    .wilkommen-page img {
        width: 44rem;
        height: 37.5rem;
        object-fit: cover;

        border-radius: 0 1.25rem 1.25rem 0;
        grid-area: image;
    }

    .wilkommen-page div {
        grid-area: content;
        max-width: 32.5rem;
    }

    .wilkommen-page h2 {
        grid-area: title;
        margin-top: 6rem;
        max-width: 32.5rem;
    }

    .wilkommen-page p {
        margin-bottom: 1.5rem;
    }
}

/* Apartments block on the main page */
.apartments-page .active {
    background: no-repeat center/100% url('images/apt1/main.jpg');
}

@media only screen and (max-width: 1279px) {
    .apartments-page {
        background: var(--col-beige-neutral);
        display: flex;
        flex-direction: column;
        padding-top: 3rem;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        padding-bottom: 2.5rem;
        border-radius: 1.25rem;
    }

    .apartments-page h2 {
        margin-bottom: 1.5rem;
        align-self: flex-start;
    }

    .apartments-page .active {
        height: 12.8125rem;
        margin-bottom: 1.5rem;
        border-radius: 0.5rem;
    }

    .apartments-page .list {
        margin-top: 0.625rem;
        margin-bottom: 0.625rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        max-height: 29rem;
        overflow-y: scroll;
    }

    .apartments-page .list .item {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }

    .apartments-page .list .item img {
        width: 6.25rem;
        height: 6.25rem;
        border-radius: 0.5rem;
    }

    .apartments-page .list .item div {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .apartments-page .list .item h5 {
        max-width: 11rem;
    }

    .apartments-page .list .item p {
        max-width: 13.5rem;
    }
}

@media only screen and (min-width: 1280px) {
    .apartments-page {
        display: grid;
        grid:
            "title   image"
            "content image";
        grid-template-rows: 0.28fr 0.72fr;
        grid-template-columns: auto 704px;
        column-gap: 2.875rem;
        padding-left: 10rem;
        box-sizing: border-box;
    }

    .apartments-page h2 {
        grid-area: title;
        margin-top: 4.875rem;
    }

    .apartments-page .active {
        grid-area: image;
        height: 704px;
        border-radius: 1.25rem 0 0 1.25rem;
    }

    .apartments-page .list {
        grid-area: content;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        max-height: 27.375rem;
        overflow-y: scroll;
    }

    .apartments-page .list .item {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        padding-right: 3.5rem;
    }

    .apartments-page .list .item img {
        width: 8.125rem;
        height: 8.125rem;
        border-radius: 0.5rem;
    }

    .apartments-page .list .item div {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .apartments-page .list .item h5 {
        font-size: var(--font-size-h4);
        font-weight: var(--font-weight-h4);
    }
}

/* Uber uns block on the main page */
@media only screen and (max-width: 1279px) {
    .uber-uns-page {
        margin-left: 1.25rem;
        margin-right: 1.25rem;
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .uber-uns-page img {
        object-fit: cover;
        height: 25rem;
        border-radius: 0.5rem;
    }

    .uber-uns-page .content p {
        margin-bottom: 1rem;
    }
}

@media only screen and (min-width: 1280px) {
    .uber-uns-page {
        display: grid;
        grid:
            "image title"
            "image content";
        grid-template-rows: 0.35fr 0.65fr;
        grid-template-columns: 704px auto;
        column-gap: 3.5rem;
    }

    .uber-uns-page h2 {
        grid-area: title;
        margin-top: 4.875rem;
    }

    .uber-uns-page img {
        grid-area: image;
        object-fit: cover;
        height: 37.5rem;
        width: 44rem;
        border-radius: 0 1.25rem 1.25rem 0;
    }

    .uber-uns-page .content {
        grid-area: content;
    }

    .uber-uns-page .content p {
        grid-area: content;
        margin-bottom: 1.5rem;
        max-width: 32.5rem;
    }
}

/* Kontakt block on the main page */
.kontakt-page .icons {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

@media only screen and (max-width: 1279px) {
    .kontakt-page {
        margin: 2.5rem 1.25rem 0 1.25rem;
        display: flex;
        flex-direction: column;
    }

    .kontakt-page h2 {
        margin-bottom: 1.5rem;
    }

    .kontakt-page .label {
        color: var(--col-secondary);
        margin-bottom: 0.5rem;
    }

    .kontakt-page .email,
    .kontakt-page .phone {
        margin-bottom: 2.5rem;
    }

    .kontakt-page .phone .extra {
        margin-top: 0.5rem;
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--col-dark-brown)
    }

    .kontakt-page .socials,
    .kontakt-page .address {
        margin-bottom: 1.5rem;
    }

    .kontakt-page .button {
        align-self: flex-start;
    }
}

@media only screen and (min-width: 1280px) {
    .kontakt-page {
        box-sizing: border-box;
        padding: 3.5rem 10rem 12.5rem 10rem;
        display: grid;
        grid:
            "title   title   title"
            "email   phone   socials"
            "address address address"
            "route   .       .";
        row-gap: 3.5rem;
    }

    .kontakt-page h2 {
        grid-area: title;
        justify-self: center;
    }

    .kontakt-page .email {
        grid-area: email;
    }

    .kontakt-page .phone {
        grid-area: phone;
    }

    .kontakt-page .socials {
        grid-area: socials;
    }

    .kontakt-page .address {
        grid-area: address;
    }

    .kontakt-page .button {
        grid-area: route;
        justify-self: left;
    }

    .kontakt-page h5 {
        font-size: var(--font-size-h4);
        font-weight: var(--font-weight-h4);
    }

    .kontakt-page .phone .extra {
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--col-secondary);
    }
}

/* Footer, shared across all pages */
.footer a {
    text-transform: uppercase;
}

@media only screen and (max-width: 1279px) {
    .footer {
        padding: 1.25rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .footer p {
        max-width: 11.25rem;
    }

    .footer .links {
        margin-top: 1.5rem;
        display: flex;
        flex-direction: row;
        gap: 1rem;
    }

    .footer .links a {
        font-size: 0.875rem;
        font-weight: 600;
    }
}

@media only screen and (min-width: 1280px) {
    .footer {
        display: grid;
        grid:
            "name    ."
            "address links";
        row-gap: 0.75rem;
        padding: 2.5rem 10rem 3.125rem 10rem;
        box-sizing: border-box;
    }

    .footer h5 {
        grid-area: name;
        font-size: var(--font-size-h4);
        font-weight: var(--font-weight-h4);
    }

    .footer p {
        grid-area: address;
        max-width: 15.625rem;
    }

    .footer .links {
        grid-area: links;
        align-self: center;
        justify-self: right;
        display: flex;
        flex-direction: row;
        gap: 5rem;
    }

    .footer .links a {
        font-weight: 600;
    }
}

.datenschutz-page {
    counter-reset: agb-section;
}

.datenschutz-page .content h5::before {
    counter-increment: agb-section;
    content: counter(agb-section) ". ";
}

@media only screen and (max-width: 1279px) {
    .datenschutz-page {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 0 1.25rem;
    }

    .datenschutz-page .title {
        margin-top: 6.5rem;
        hyphens: auto;
    }

    .datenschutz-page img {
        height: 25rem;
        object-fit: cover;
        border-radius: 0.5rem;
    }

    .datenschutz-page .content h5 {
        color: var(--col-dark-brown);
        margin-bottom: 1.5rem;
        margin-top: 3.5rem;
    }

    .datenschutz-page .content h5:first-of-type {
        margin-top: 1.5rem;
    }
}

ul {
    margin: 0;
    padding: 0;
    list-style-position: inside;
}

@media only screen and (min-width: 1280px) {
    .datenschutz-page {
        margin-top: -2.625rem;

        display: grid;
        grid:
            "image   title"
            "image   greet"
            "content content";
        grid-template-columns: 44rem auto;
        column-gap: 3.5rem;
        padding-right: 10rem;
    }

    .datenschutz-page h1 {
        font-size: 3.375rem;
        font-weight: 700;
    }

    .datenschutz-page>img {
        grid-area: image;
        object-fit: cover;
        height: 37.5rem;
        width: 44rem;
        border-radius: 0 1.25rem 1.25rem 0;
    }

    .datenschutz-page>.title {
        grid-area: title;
        align-self: self-end;
        margin-bottom: 1.75rem;
    }

    .datenschutz-page>p {
        grid-area: greet;
        align-self: self-start;
        margin-top: 1.75rem;
    }

    .datenschutz-page>.content {
        grid-area: content;
        column-count: 2;
        column-gap: 2rem;
        padding: 7.5rem 0rem 12.5rem 10rem;
    }

    .datenschutz-page>.content h5 {
        color: var(--col-dark-brown);
        font-size: var(--font-size-h4);
        font-weight: var(--font-weight-h4);
        margin-bottom: 1.5rem;
        break-inside: avoid-column;
    }

    .datenschutz-page>.content>p,
    .datenschutz-page>.content>div {
        padding-left: 3.375rem;
        margin-bottom: 2rem;
        break-inside: avoid-column;
    }
}

.impressum-page h1,
.impressum-page h2 {
    color: var(--col-dark-brown)
}

.impressum-page a {
    text-decoration: underline;
}

/* Impressum page */
@media only screen and (max-width: 1279px) {
    .impressum-page {
        display: flex;
        flex-direction: column;
        gap: 3.5rem;
        padding: 0 1.25rem;
    }

    .impressum-page h1 {
        margin-top: 6.5rem;
    }

    .impressum-page h2 {
        margin-bottom: 1.5rem;
    }
}

@media only screen and (min-width: 1280px) {
    .impressum-page {
        display: grid;
        grid:
            "title title title"
            "minga gf    bg"
        ;
        row-gap: 3.5rem;
        column-gap: 2rem;
        margin-top: -1.125rem;
        padding: 0 10rem 12.5rem 12.5rem;
        box-sizing: border-box;
    }

    .impressum-page>h1 {
        grid-area: title;
    }

    .impressum-page h2 {
        font-size: var(--font-size-h4);
        font-weight: var(--font-weight-h4);
        margin-bottom: 1.5rem;
    }
}

/* AGB Page */
.agb-page {
    counter-reset: agb-section;
}

.agb-page .content h5::before {
    counter-increment: agb-section;
    content: counter(agb-section) ". ";
}

@media only screen and (max-width: 1279px) {
    .agb-page {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 0 1.25rem;
    }

    .agb-page .title {
        margin-top: 6.5rem;
    }

    .agb-page .content h5 {
        color: var(--col-dark-brown);
        margin-bottom: 1.5rem;
        margin-top: 3.5rem;
    }

    .agb-page .content h5:first-of-type {
        margin-top: 1.5rem;
    }
}

@media only screen and (min-width: 1280px) {
    .agb-page {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        margin-top: -1.125rem;
        padding: 0 10rem 12.5rem 10rem;
        box-sizing: border-box;
    }

    .agb-page .title {
        max-width: 40rem;
    }

    .agb-page .content {
        column-count: 2;
    }

    .agb-page .content h5 {
        color: var(--col-dark-brown);
        font-size: var(--font-size-h4);
        font-weight: var(--font-weight-h4);
        margin-bottom: 1.5rem;
    }

    .agb-page .content p {
        padding-left: 3.375rem;
        margin-bottom: 2rem;
    }

    .agb-page .content>div {
        break-inside: avoid-column;
    }
}


/* Room page */
@media only screen and (max-width: 1279px) {
    .room-body {
        --menu-icon-filter: invert();
    }

    .room-intro-page {
        padding: 20rem 1.25rem 0 1.25rem;
        box-sizing: border-box;

        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .room-intro-page .button {
        align-self: flex-end;
        margin-top: 1.5rem;
    }

    .room-intro-page .preis h5 {
        margin-bottom: 0.5rem;
        color: var(--col-secondary)
    }

    .room-intro-page div.bg {
        display: none;
    }
}

@media only screen and (min-width: 1280px) {
    .room-description-page {
        display: grid;
        grid:
            "image title       title"
            "image description description"
            "image price       book";
        column-gap: 3.5rem;
        row-gap: 3.5rem;
        grid-template-columns: 44rem 16.5rem auto;
        grid-template-rows: 15rem 11.625rem 10.375rem;

        margin-top: -2.625rem;
        padding-right: 10rem;
        box-sizing: border-box;
    }

    .room-description-page>.bg {
        grid-area: image;
        border-radius: 0 1.25rem 1.25rem 0;
    }

    .room-description-page>h2 {
        grid-area: title;
        align-self: self-end;
    }

    .room-description-page>.description_and_tags {
        grid-area: description;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .room-description-page>p {
        font-size: 1.5rem;
    }

    .room-description-page>.price h4 {
        grid-area: price;
        align-self: self-start;
    }

    .room-description-page .price h4 {
        color: var(--col-secondary);
    }

    .room-description-page>.button {
        grid-area: book;
        align-self: self-start;
    }
}

.tags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

@media only screen and (min-width: 1280px) {
    .tags {
        gap: 0.25rem;
        font-size: 1rem;
    }
}

@media only screen and (max-width: 1279px) {
    .tags {
        gap: 0.5rem;
        font-size: 0.875rem;
    }
}

.tags>span {
    padding: 0.25rem 0.75rem;
    border-radius: 1.5rem;
    background: var(--col-beige-neutral);
    font-weight: 600;
}

@media only screen and (max-width: 1279px) {
    .room-description-page {
        padding: 2.5rem 1.25rem 0 1.25rem;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .room-description-page .tags {
        margin-top: 0.75rem;
    }
}

@media only screen and (max-width: 1279px) {
    .room-gallery-page {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        box-sizing: border-box;

        display: flex;
        flex-direction: row;
        gap: 1.25rem;

        overflow-x: scroll;
    }

    .room-gallery-page img {
        width: 21.875rem;
        height: 25rem;
        object-fit: cover;
        border-radius: 0.5rem;
    }
}

@media only screen and (min-width: 1280px) {
    .room-gallery-page {
        box-sizing: border-box;
        padding-left: 10rem;
        padding-right: 10rem;

        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 1rem;
    }

    .room-gallery-page img:first-child {
        grid-row: 1/3;
        grid-column: 1/3;
        width: 34.25rem;
        height: 34.75rem;
        border-radius: 1.25rem 0 0 1.25rem;
    }

    .room-gallery-page img:nth-child(3) {
        border-radius: 0 1.25rem 0 0;
    }

    .room-gallery-page img:nth-child(5) {
        border-radius: 0 0 1.25rem 0;
    }

    .room-gallery-page img:nth-child(n+6) {
        display: none;
    }

    .room-gallery-page img {
        width: 16.875rem;
        height: 16.875rem;
        object-fit: cover;
    }
}

.facility-icon {
    display: inline-block;
    width: 1.875rem;
    height: 1.875rem;
    background-size: cover;
}

.facility-1 {
    background-image: url('images/icons/f1.svg');
}

.facility-2 {
    background-image: url('images/icons/f2.svg');
}

.facility-3 {
    background-image: url('images/icons/f3.svg');
}

.facility-4 {
    background-image: url('images/icons/f4.svg');
}

.facility-5 {
    background-image: url('images/icons/f5.svg');
}

.facility-6 {
    background-image: url('images/icons/f6.svg');
}

.facility-7 {
    background-image: url('images/icons/f7.svg');
}

.facility-8 {
    background-image: url('images/icons/f8.svg');
}

.facility-9 {
    background-image: url('images/icons/f9.svg');
}

.facility-10 {
    background-image: url('images/icons/f10.svg');
}

.facility-11 {
    background-image: url('images/icons/f11.svg');
}

.facility-12 {
    background-image: url('images/icons/f12.svg');
}

.facility-13 {
    background-image: url('images/icons/f13.svg');
}

.facility-14 {
    background-image: url('images/icons/f14.svg');
}

.facility-15 {
    background-image: url('images/icons/f15.svg');
}

.facility-16 {
    background-image: url('images/icons/f16.svg');
}

.facility-17 {
    background-image: url('images/icons/f17.svg');
}

.facility-18 {
    background-image: url('images/icons/f18.svg');
}

.facility-19 {
    background-image: url('images/icons/f19.svg');
}

.facility-20 {
    background-image: url('images/icons/f20.svg');
}

#show-all-toggle {
    display: none;
}

@media only screen and (max-width: 1279px) {
    .room-facilities-page {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        box-sizing: border-box;

        display: flex;
        flex-direction: column;
    }

    .room-facilities-page .facilities {
        margin-top: 3rem;
        margin-bottom: 4.5rem;

        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .room-facilities-page .facilities>* {
        font-size: 1.125rem;
        font-weight: 600;
        padding-left: 0.75rem;
        display: flex;
        flex-direction: row;
        gap: 0.75rem;
        align-items: center;
    }

    .room-facilities-page .facilities>*:nth-child(4n+5) {
        border-top: solid 1px var(--col-secondary);
        padding-top: 2rem;
        margin-top: 1rem;
    }

    .room-facilities-page .facilities>*:nth-child(n+5) {
        display: none
    }

    #show-all-toggle:checked~.room-facilities-page .facilities>*:nth-child(n+5) {
        display: flex;
    }

    #show-all-toggle:not(:checked)~.room-facilities-page .toggle-active {
        display: none;
    }

    #show-all-toggle:checked~.room-facilities-page .toggle-inactive {
        display: none;
    }

    .room-facilities-page .button {
        align-self: flex-end;
    }
}

@media only screen and (min-width: 1280px) {
    .room-facilities-page {
        padding-left: 10rem;
        padding-right: 10rem;
        box-sizing: border-box;

        display: flex;
        flex-direction: column;
        gap: 2.5rem;
    }

    .room-facilities-page .facilities {
        display: grid;
        grid-template-rows: repeat(4, 1fr);
        grid-template-columns: repeat(3, 1fr);
        grid-auto-flow: column;
        column-gap: 2rem;
        row-gap: 0.75rem;
    }

    .room-facilities-page .facilities>* {
        padding: 0.5rem 1rem;

        font-size: 1.5rem;
        font-weight: 500;

        display: flex;
        flex-direction: row;
        gap: 0.75rem;
    }
}

@media only screen and (max-width: 1279px) {
    .room-details-page {
        padding: 0rem 1.25rem 0 1.25rem;
        box-sizing: border-box;
    }

    .room-details-page h2 {
        margin-bottom: 1.5rem;
    }

    .room-details-page .content {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
}

@media only screen and (min-width: 1280px) {
    .room-details-page {
        padding-left: 10rem;
        padding-right: 10rem;
        box-sizing: border-box;
    }

    .room-details-page h2 {
        font-size: var(--font-size-h3);
        font-weight: var(--font-weight-h3);
        max-width: 36.5rem;
        margin-bottom: 2.5rem;
    }

    .room-details-page .content {
        column-count: 2;
    }

    .room-details-page .content>* {
        margin-bottom: 1.5rem;
    }
}

@media only screen and (max-width: 1279px) {
    .room-vacation-page {
        padding: 5rem 1.25rem 6.25rem 1.25rem;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 2.5rem;

        background: var(--col-beige-neutral);
        border-radius: 1.25rem;
    }

    .room-vacation-page .button {
        align-self: flex-end;
    }

    .room-vacation-page img {
        border-radius: 0.5rem;
    }
}

@media only screen and (min-width: 1280px) {
    .room-vacation-page {
        display: grid;
        grid:
            "title image"
            "book  image";
        grid-template-columns: auto 44rem;
        column-gap: 3.5rem;
        row-gap: 3.5rem;
        box-sizing: border-box;
        padding-left: 10rem;
    }

    .room-vacation-page>h1 {
        grid-area: title;
        font-size: var(--font-size-h2);
        font-weight: var(--font-weight-h2);
        align-self: self-end;
    }

    .room-vacation-page>.button {
        grid-area: book;
        justify-self: self-start;
        align-self: self-start;
    }

    .room-vacation-page>img {
        grid-area: image;
        height: 37.5rem;
        max-width: 44rem;
        object-fit: cover;
        border-radius: 1.25rem 0 0 1.25rem;
        justify-self: end;
    }
}

@media only screen and (max-width: 1279px) {
    .room-recommendations-page {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .room-recommendations-page h2 {
        margin-bottom: 2.5rem;
    }

    .room-recommendations-page .list {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
    }

    .room-recommendations-page .list .item {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .room-recommendations-page .list .item img {
        height: 12.8125rem;
        object-fit: cover;
        border-radius: 0.5rem;
    }

    .room-recommendations-page .list .item h3 {
        margin-bottom: 0.5rem;
    }

    .room-recommendations-page .list .item .button {
        align-self: flex-end;
    }
}

@media only screen and (min-width: 1280px) {
    .room-recommendations-page {
        padding-left: 10rem;
        padding-right: 10rem;
        box-sizing: border-box;
        padding-bottom: 7rem;
    }

    .room-recommendations-page h2 {
        font-size: var(--font-size-h3);
        font-weight: var(--font-weight-h3);
        max-width: 34rem;
        margin-bottom: 2.5rem;
    }

    .room-recommendations-page .list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2rem;
    }

    .room-recommendations-page .list .item {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        max-width: 22rem;
    }

    .room-recommendations-page .list .item h3 {
        margin-top: 0.5rem;
        margin-bottom: 1rem;
        font-size: var(--font-size-h4);
        font-weight: var(--font-weight-h4);
    }

    .room-recommendations-page .list .item img {
        width: 22rem;
        height: 16rem;
        object-fit: cover;
        border-radius: 1rem;
    }

    .room-recommendations-page .list .item .button {
        margin-top: 2.25rem;
        align-self: flex-start;
    }
}

/* Menu */
#menu-toggle {
    display: none;
}

@media only screen and (max-width: 1279px) {
    .header-menu {
        position: absolute;
        right: 0;
        top: 0;
        padding-top: 3rem;
        padding-right: 2rem;
    }

    .header-menu {
        z-index: 1;
    }

    .logo {
        position: absolute;
        top: 3rem;
    }

    .header-menu-links a {
        display: block;
        border-bottom: solid 0.125rem #FFFFFF;
        width: 13.75rem;
        text-align: center;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .header-menu-links {
        display: none;

        background: var(--col-orange-accent);
        color: var(--col-beige-neutral);

        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        padding-top: 8rem;
        padding-bottom: 6rem;
        overflow: hidden;
        border-radius: 0 0 1rem 1rem;
    }

    #menu-toggle:checked~.header-menu {
        --menu-icon-filter: invert()
    }

    #menu-toggle:checked~.header-menu-links {
        display: flex;
        gap: 0.5rem;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 1.5rem;
        font-weight: 500;
    }
}

@media only screen and (min-width: 1280px) {
    .header-menu {
        display: none;
    }

    .header-menu-links, .logo {
        padding-right: 11.25rem;
        padding-top: 5rem;
    }
    .logo {
        position: absolute;
        left: 10rem;
    }
    .header-menu-links {
        display: flex;
        flex-direction: row;
        gap: 3.5rem;
        justify-content: right;
    }

    .header-menu-links a {
        font-size: 1.5rem;
        font-weight: 500;
    }
}


@media only screen and (min-width: 1280px) {
    .rounded {
        border-radius: 1rem;
    }
}
@media only screen and (max-width: 1279px) {
    .rounded {
        border-radius: 0.5rem;
    }
}

@media only screen and (max-width: 1279px) {
    .must-visit-headers {
        background: linear-gradient(344.84deg, rgba(0, 0, 0, 0.78) 27.36%, rgba(49, 42, 23, 0) 80.7%),
            url(images/visit/boat.jpg) no-repeat;
        background-position: 20% 50%;
        background-size: cover;

        /* Copy of 'dark' class */
        color: var(--col-beige-neutral);
        background-color: var(--col-dark-brown);

        box-sizing: border-box;
        height: 52.75rem;
        padding-top: 32rem;

        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .must-visit-headers h2 {
        font-size: 2.5rem;
        font-weight: 700;
    }

    .must-visit-headers h3 {
        font-size: 1.5rem;
        font-weight: 500;
    }

    .must-visit-places {
        display: grid;
        grid-template-columns: 1fr 1fr;
        row-gap: 2.5rem;
    }
    .must-visit-places .item {
        max-width: 9.375rem;
        display: flex;
        flex-direction: column;
        gap: 0.75rem
    }

    .must-visit-places .item>img {
        width: 9.375rem;
        height: 9.375rem;
        object-fit: cover;
        margin-bottom: 0.25rem;
    }
    .must-visit-places .item>h4 {
        font-size: 1.125rem;
        font-weight: 600;
    }
    .must-visit-places .item>.description {
        font-size: 1rem;
        font-weight: 400;
    }
}

@media only screen and (min-width: 1280px) {
    .must-visit-headers {
        margin-top: -5rem;
    }

    .must-visit-headers h3 {
        max-width: 36.5rem;
        margin-top: 1.5rem;
    }

    .must-visit-places {
        margin-top: -2.5rem;

        display: flex;
        row-gap: 4rem;
        column-gap: 2rem;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .must-visit-places .item {
        width: 22rem;

        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .must-visit-places .item>img {
        margin-bottom: 1.5rem;
        width: 22rem;
        height: 16rem;
        object-fit: cover;
    }

    .must-visit-places .item>.description {
        font-size: 1.125rem;
        font-weight: 400;
    }
}

@media only screen and (min-width: 1280px) {
    .must-visit-title {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .must-visit-title img {
        height: 37.5rem;
        border-radius: 1.25rem;
    }
}
@media only screen and (max-width: 1279px) {
    .must-visit-title {
        display: flex;
        flex-direction: column;
    }
    .must-visit-title img {
        height: 28.75rem;
        border-radius: 0.5rem;
        object-fit: cover;
        object-position: 25% center;
    }
}

@media only screen and (min-width: 1280px) {
    .must-visit-finisher {
        display: flex;
        flex-direction: row;
        gap: 4.5625rem;

        margin-bottom: 9.75rem;
    }

    .must-visit-finisher .button {
        align-self: flex-end;
    }
}

@media only screen and (max-width: 1279px) {
    .must-visit-finisher {
        display: flex;
        flex-direction: column;
        gap: 4rem;

        margin-top: -2rem;
        margin-bottom: 9.75rem;
    }

    .must-visit-finisher .button {
        align-self: flex-end;
    }
}