.expertise {
    background: white;
    padding: 90px 0;
}

.expertise__inner {
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
    /*background: red;*/
}

.expertise__intro {
    text-align: center;
    margin-bottom: 50px;
}

.expertise__intro h2 {
    margin: 0 0 14px;
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--navy);
}

.expertise__intro p {
    margin: 0;
    font-size: 1.1rem;
    color: var(--slateblue);
}

.expertise__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.expertise-card {
    display: grid;
    grid-template-rows: auto auto auto;
    align-content: start;
    justify-items: start;
    row-gap: 0;

    aspect-ratio: 445 / 280;
    padding: 30px;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--cream);

    border: 8px solid white;
    border-radius: 3px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.08);

    color: var(--navy);
    text-decoration: none;

    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.expertise-card-background1 {
    background-image: url('../images/main-page/service-card-01.png');
}

.expertise-card-background2 {
    background-image: url('../images/main-page/service-card-02.png');
}

.expertise-card-background3 {
    background-image: url('../images/main-page/service-card-03.png');
}

.expertise-card-background4 {
    background-image: url('../images/main-page/service-card-04.png');
}

.expertise-card-background5 {
    background-image: url('../images/main-page/service-card-05.png');
}

.expertise-card-background6 {
    background-image: url('../images/main-page/service-card-06.png');
}

.expertise-card:hover {
    transform: scale(1.02);
    /*box-shadow: 0 14px 30px var(--slateblue);*/
    box-shadow: 0 8px 20px color-mix(in srgb, var(--slateblue) 50%, transparent);
}

.expertise-card .material-symbols-outlined {
    grid-row: 1;
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
    color: var(--blue);
    margin: 0 0 12px;
}

.expertise-card h3 {
    grid-row: 2;
    margin: 0 0 16px;
    font-size: 1.55rem;
    line-height: 1.12;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--burgandy);

    /* Reserve space for two lines */
    min-height: calc(2 * 1.12em);
}

.expertise-card p {
    grid-row: 3;
    margin: 0;
    max-width: 92%;
    font-size: 0.96rem;
    line-height: 1.5;
    font-weight: 400;
    color: var(--slateblue);
}

.expertise-card span {
    margin-top: auto;
    font-weight: 600;
    color: var(--lightblue);
}

.expertise-card:hover h3,
.expertise-card:hover p {
    /*color: var(--beige);*/
}

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

@media (max-width: 600px) {
    .expertise {
        padding: 65px 0;
    }

    .expertise__grid {
        grid-template-columns: 1fr;
    }

    .expertise-card {
        min-height: auto;
        padding: 28px;
    }
}

@media (max-width: 600px) {
    .expertise-card {
        aspect-ratio: auto;
        min-height: 240px;
        padding: 28px;
    }
}