.solutions-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);

    .category-infos {
        .category-title {
            color: var(--color-primary);
            font-weight: var(--fw-bold);
            font-size: var(--fs-title);
            font-family: var(--ff-title);
        }

        .category-description {
            color: var(--color-secondary);
            font-weight: var(--fw-bold);
            font-size: var(--fs-subtitle);
            font-family: var(--ff-subtitle);
        }
    }

    .solutions-items {
        .solution-item {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-md);
            border-top: 1px solid var(--color-text);
            padding: var(--spacing-lg) 0;

            &:last-child {
                border-bottom: 1px solid var(--color-text);
            }

            .solution-title {
                font-weight: var(--sw-bold);
                font-size: var(--fs-subtitle);
                color: var(--color-text);
                font-family: var(--ff-title);
            }

            .solution-description {
                font-family: var(--ff-text);
                font-size: var(--fs-text);
            }

            .solution-link {
                text-transform: uppercase;
                color: var(--color-secondary);
                font-size: var(--fs-text);
                font-weight: var(--fw-bold);
                font-family: var(--ff-button);
                transition: all 0.3s ease;
                width: fit-content;

                i {
                    color: var(--color-white);
                    background-color: var(--color-primary);
                    font-size: var(--fs-subtext);
                    padding: 9px;
                    border-radius: var(--radius-full);
                    margin-right: var(--spacing-xs);
                    transition: all 0.3s ease;
                    width: var(--spacing-xl);
                    height: var(--spacing-xl);
                    text-align: center;
                }

                &:hover {
                    color: var(--color-primary);
                    text-decoration: underline;
                    i {
                        transform: rotate(90deg);
                        background-color: var(--color-secondary);
                    }
                }
            }
        }
    }
}