.home-solutions {
    padding-top: 64px;
}

.home-solutions .section-heading {
    margin-bottom: 24px;
}

.solutions__tabs {
    display:       flex;
    flex-wrap:     wrap;
    gap:           12px;
    margin-bottom: 24px;
}

.solutions__tab {
    padding:       14px 24px;
    border-radius: var(--radius-pill);
    font-size:     15px;
    font-weight:   600;
    color:         #3b4046;
    background:    #f3f5f8;
    cursor:        pointer;
    transition:    background var(--transition), color var(--transition);
}

.solutions__tab:hover {
    background: var(--neutral-100);
}

.solutions__tab.is-active {
    color:      var(--text-inverse);
    background: var(--icon-brand);
}

.solutions__cards {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap:                   24px;
}

.solutions__tile {
    position:      relative;
    display:       block;
    height:        320px;
    overflow:      hidden;
    border-radius: 20px;
    color:         var(--text-inverse);
    background:    var(--gradient-brand-cool);
}

.solutions__tile::after {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 35%, rgba(0, 0, 0, .78) 100%);
    pointer-events: none;
}

.solutions__image {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.solutions__tile:hover .solutions__image {
    transform: scale(1.04);
}

.solutions__content {
    position:       absolute;
    right:          24px;
    bottom:         24px;
    left:           24px;
    z-index:        1;
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

.solutions__label {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             8px;
    min-height:      32px;
}

.solutions__name {
    font-size:   20px;
    font-weight: 600;
}

.solutions__text {
    font-size:   13px;
    line-height: 1.4;
    color:       rgba(255, 255, 255, .72);
}

@media (max-width: 1023px) {
    .home-solutions {
        padding-top: 48px;
    }
}

@media (max-width: 767px) {
    .solutions__tile {
        height: 240px;
    }

    .solutions__tab {
        padding: 12px 18px;
    }
}