.page-catalog {
    color: var(--navy)
}

.catalog-wrap {
    width: min(100% - 64px, 1240px);
    margin: auto
}

.catalog-hero {
    min-height: 345px;
    background: linear-gradient(90deg, #effaff 0%, #effaffd9 46%, #effaff22 75%), url('../images/intro.jpg') 76% center/cover
}

.catalog-hero .catalog-wrap {
    padding: 28px 0
}

.catalog-hero nav {
    font-size: 11px;
    color: #60778b
}

.catalog-hero h1 {
    margin: 30px 0 9px;
    font-size: 39px
}

.catalog-hero p {
    margin: 0;
    color: #476077;
    font-size: 17px;
    line-height: 1.45
}

.catalog-main {
    padding: 19px 0
}

.catalog-main section {
    margin: 29px 0
}

.catalog-quick-title {
    margin: 0 0 11px;
    font-size: 20px
}

.catalog-quick {
    display: grid;
    grid-template-columns: 40px repeat(5, 1fr) 40px;
    gap: 8px
}

.catalog-quick a {
    padding: 13px 8px;
    border-radius: 4px;
    background: #eaf4fc;
    color: var(--navy);
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    height: 48px;
}

.catalog-quick a:first-child, .catalog-quick a:last-child {
    font-size: 30px;
    line-height: normal;
    height: 48px;
    padding: 4px;
}

.catalog-quick a:hover {
    background: var(--beta-brand);
    color: #fff;
}

.catalog-main section>h2 {
    margin: 0 0 11px;
    border-left: 5px solid var(--brand);
    padding-left: 13px;
    font-size: 27px
}

.catalog-intro {
    margin: -6px 0 14px;
    padding-left: 18px;
    color: #64788b
}

.catalog-grid {
    display: grid;
    gap: 16px
}

.catalog-grid.four {
    grid-template-columns: repeat(4, 1fr)
}

.catalog-grid article {
    padding: 0 13px 13px;
    border: 1px solid #dce7ed;
    border-radius: 4px;
    overflow: hidden
}

.catalog-grid img {
    width: calc(100% + 26px);
    height: 195px;
    margin-left: -13px;
    object-fit: cover
}

.catalog-grid h3 {
    margin: 10px 0 5px;
    font-size: 17px
}

.catalog-grid p {
    min-height: 39px;
    margin: 0;
    color: #617488;
    font-size: 14px;
    line-height: 1.35
}

.catalog-grid a {
    display: block;
    margin-top: 11px;
    color: var(--brand);
    font-weight: 800
}

.catalog-consult {
    padding: 26px 0;
    background: #eaf7ff
}

.catalog-consult .catalog-wrap {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 35px;
}

.catalog-consult>div>div h2 {
    font-size: 28px
}

.catalog-consult p {
    max-width: 400px;
    color: #000;
    font-size: 17px;
    line-height: 1.4
}

.catalog-consult form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 19px;
    background: #063a67;
    border-radius: 4px
}

.catalog-consult form h2 {
    grid-column: 1/-1;
    margin: 0;
    color: #fff;
    font-size: 19px
}

.catalog-consult input,
.catalog-consult textarea {
    border: 0;
    border-radius: 4px;
    padding: 10px;
    font: inherit;
    font-size: 12px
}

.catalog-consult textarea {
    grid-column: 1/-1;
    height: 62px;
    resize: vertical
}

.catalog-consult button,
.catalog-consult form a {
    border: 0;
    border-radius: 4px;
    background: var(--brand);
    padding: 11px;
    color: #fff;
    text-align: center;
    font-weight: 800;
    cursor: pointer;
    font-size: 14px;
}

.catalog-consult form a {
    background: transparent;
    border: 1px solid #fff
}

.catalog-consult form a span {
    background: #fff;
    height: 25px;
    width: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    border-radius: 100%;
    color: #0068FF;
}

@media(max-width:767px) {
    .catalog-wrap {
        width: min(100% - 30px, 1240px)
    }

    .catalog-hero h1 {
        font-size: 33px
    }

    .catalog-hero p {
        max-width: 78%;
        font-size: 15px
    }

    .catalog-quick {
        display: flex;
        overflow-x: auto
    }

    .catalog-quick a {
        flex: 0 0 150px
    }

    .catalog-grid.four {
        grid-template-columns: 1fr 1fr
    }

    .catalog-grid img {
        height: 130px
    }

    .catalog-consult .catalog-wrap {
        grid-template-columns: 1fr
    }

    .catalog-consult form {
        grid-template-columns: 1fr
    }

    .catalog-consult textarea {
        grid-column: auto
    }
}