@media (max-width: 50rem) {
    .hotels-table {
        margin: 0;
        width: 100%

    }

        .hotels-table .hotels-heading {
            display: none;
        }

        .hotels-table .hotels-body {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
        }

        .hotels-table .hotels-body tr {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
        }

        .hotels-table .hotels-body td[headers] {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                    justify-content: space-between;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            font-weight: 600
        }

            .hotels-table .hotels-body td[headers]::before {
                font-weight: normal;
                color: #FDC983;
                content: attr(data-heading);
                max-width: 14ch;
                text-align: left;
            }

        .hotels-table .hotels-body .hotel {
            position: relative;
        }

        .hotels-table .hotels-body .hotel::after {
            content: '\e801';
            font-family: "fontello";
            font-style: normal;
            font-weight: normal;
            speak: never;
            display: inline-block;
            text-decoration: inherit;
            width: auto;
            margin-right: .2em;
            text-align: center;
            -webkit-font-feature-settings: normal;
                    font-feature-settings: normal;
            font-variant: normal;
            text-transform: none;
            line-height: 1em;
            margin-left: .2em;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            color: var(--color-primary);
            position: absolute;
            right: 0;
            top: 50%;
            -webkit-transform: rotateZ(180deg);
                    transform: rotateZ(180deg);
            -webkit-transition: 250ms ease-in;
            transition: 250ms ease-in;
        }

        .hotels-table .hotels-body .hotel.is-active::after {
            -webkit-transform: rotateZ(0deg);
                    transform: rotateZ(0deg);
        }

        .hotels-table .hotels-body tr:not(:first-of-type) .hotel {
            border-width: 1px 0;
            border-style: solid;
            border-color: var(--color-gray-dark);
        }

}