@import "./global-style.less";

section#section-item {
    background-color: @colors[background];

    textarea {
        height: 10rem;
    }

    .rank-number {
        font-size: 1.2rem;
        font-weight: 500;
    }

    // Big screens
    @media screen and (min-width: 992px) {
        button {
            width: 30% !important;
        }
    }
}

section#section-restaurants,
section#section-stores {
    #box-list-restaurants,
    #box-list-stores {
        columns: 1;

        @media screen and (min-width: 992px) {
            columns: 2;
        }

        @media screen and (min-width: 1300px) {
            columns: 3;
        }

        .restaurant,
        .store {
            display: flex;
            flex-direction: column;
            break-inside: avoid-column;
            padding: 10px;

            i { font-size: 1.5rem; }

            .name {
                font-size: 1.2rem;
                font-weight: 500;
                color: @colors[primary];
            }

            .rank {
                font-size: 1.2rem;
                font-weight: 500;
                color: @colors[complementary];
            }

            .phone {
                font-size: 1.2rem;
                font-weight: 500;
                color: @colors[complementary];
            }
        }
    }
}

section#section-map {
    background-color: @colors[background];
    padding: 0;

    h1 {
        margin: .5rem 1rem;
    }

    #map {
        height: 100%;
        width: 100%;
        z-index: 1;
    }
}