:root {
    --bg: #f7f9fc;
    --paper: #fff;
    --ink: #0f172a;
    --muted: #5b6472;
    --line: #e5e7eb;
    --r: 20px;
    --r-lg: 24px;
    --shadow: 0 14px 34px rgba(2, 6, 23, .10);
}

.wrap {
    width: min(1460px, 94vw);
    margin: 0 auto
}

.destinations {
    background: var(--bg);
    padding: 28px 0 70px
}

.block-head {
    margin: 8px 0 16px
}

.block-head.mt {
    margin-top: 34px
}

.block-head h1, .block-head h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(26px, 3.2vw, 36px)
}

.block-head .muted {
    margin: 6px 0 0;
    color: var(--muted)
}

.cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

@media (max-width: 1060px) {
    .cards {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width: 640px) {
    .cards {
        grid-template-columns: 1fr
    }
}

.card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    /*box-shadow: var(--shadow);*/
    overflow: hidden;
    display: grid;
    grid-template-rows: 220px auto;
}

.photo {
    background-size: cover;
    background-position: center
}

.body {
    padding: 16px 16px 18px
}

.body h2 {
    margin: 0 0 6px;
    color: var(--ink);
    font-size: clamp(18px, 2.2vw, 22px)
}

.desc {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.55
}

.meta {
    display: flex;
    gap: 10px;
    align-items: center;
}

.time {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #1e3a8a;
    background: #eef6ff;
    border: 1px solid #dbeafe;
    padding: 6px 10px;
    border-radius: 999px
}

.time svg {
    width: 14px;
    height: 14px
}