#solutions-directory-section {
}

    #solutions-directory-section h3 {
        text-align: center;
        font: normal normal bold 40px / 56px Roboto;
        letter-spacing: 0.43px;
        color: #333333;
        margin: 0 auto 36px;
        width: 65%;
    }

.directory-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.directory-item {
    flex: 0 0 calc((100% - (4 * 24px)) / 5);
    box-sizing: border-box;
    border-radius: 16px;
    background: #FFF;
    box-shadow: 0 0 4px 0 rgba(110, 110, 110, 0.50);
    padding: 24px;
    display: block;
    transition: all 202ms ease-in-out;
    transform-origin: center;
    position: relative;
    z-index: 1;
}

    .directory-item .title-arrow-row {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .directory-item .title {
        color: #155036;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.4;
        margin-bottom: 8px;
        text-align: left;
    }

    .directory-item .description {
        color: #333;
        font-size: 16px;
        line-height: 1.75;
    }

    .directory-item .proceed-arrow {
        display: none;
    }

    .directory-item:hover {
        text-decoration: none;
        transform: scale( calc((100% + 4px) / 100%), calc((100% + 2px) / 100%) );
        z-index: 10;
    }

        .directory-item:hover .title {
            color: #5C8774
        }

        .directory-item:hover .proceed-arrow {
            display: block;
        }

@media only screen and (max-width: 1199px) {
    .directory-item {
        flex: 0 0 calc((100% - (3 * 24px)) / 4);
    }
}

@media only screen and (max-width: 991px) {
    #solutions-directory-section h3 {
        width: 100%;
    }

    .directory-item {
        flex: 0 0 calc((100% - (2 * 24px)) / 3);
    }
}

@media only screen and (max-width: 768px) {
    .directory-item {
        flex: 0 0 calc((100% - (1 * 24px)) / 2);
    }
}

@media only screen and (max-width: 575px) {
    #solutions-directory-section h3 {
        font-size: 32px;
        line-height: 46px;
    }
}

@media only screen and (max-width: 480px) {
    .directory-grid {
        width: 70%;
        margin: 0 auto;
    }

    .directory-item {
        flex: 100%;
    }
}