* {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

html, body {
    margin: 0;
}

nav {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 0.1vw solid rgba(0, 0, 0, .1);
}

select, button {
    cursor: pointer;
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0.5vw 1vw;
    width: 100%;
}

.nav__brand {
    width: 1.5vmax;
    cursor: pointer;
}

.section__title {
    margin: 0;
    color: rgba(0, 0, 0, .5);
    font-size: 5vw;
    text-align: center;
}

.section__cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75vw;
    margin: 0.75vw;
}

.section__cards-meal, .section__cards-meal--thumb, .section__cards-meal--thumb img {
    width: 16vw;
}

.section__cards-meal {
    justify-self: center;
    align-self: center;
    border: 0.1vw solid rgba(0, 0, 0, .1);
    border-radius: 1vw;
    overflow: hidden;
}

.section__cards-meal--thumb {
    height: 12vw;
    overflow: hidden;
}

.section__cards-meal--thumb img {
    object-fit: cover;
    user-select: none;
}

.section__cards-meal--data {
    display: flex;
    align-items: center;
    padding: 0 1vw;
    border-bottom: 0.1vw solid rgba(0, 0, 0, .1);
    color: rgba(0, 0, 0, .5);
    font-size: 0.7vw;
}

.section__cards-meal--name {
    justify-content: center;
    font-size: 1vw;
}

.section__cards-meal--name p {
    margin: 0.5vw;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section__cards-meal--classification p {
    margin: 0.3vw;
}

.section__cards-meal--classification p {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.section__cards-meal--type {
    color: rgba(0, 0, 0, .25);
}

.section__cards-meal--more-btn {
    margin: 0;
    padding: 0.3vw;
    width: 100%;
    border: none;
    color: rgba(0, 0, 0, .5);
    font-size: 0.9vw;
    user-select: none;
}