@use "variables";

.plugins-packages {
    .wrapper {
        display: flex;
    }

    .col-plugins {
        flex: 1.07;
    }

    .col-packages {
        flex: 0.93;
    }

    .section-title {
        text-align: left;
        transform: translateX(-5px);
    }

    p {
        padding: 0 100px 0 0;
        line-height: 1.6;
    }

    ul,
    li {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    ul {
        columns: 2;
        margin: 50px 0 0;
        max-width: 500px;
    }

    li {
        a {
            position: relative;
            display: inline-block;
            overflow: visible;
            color: variables.$text-color;
            transition: color variables.$transition-duration, transform variables.$transition-duration;
            line-height: 1.8;

            &:hover {
                color: variables.$primary-color;
                text-decoration: none;
            }

            img,
            svg {
                display: inline-block;
                color: variables.$primary-color;
                fill: variables.$primary-color;
                width: 20px;
                height: 20px;
                margin-right: 8px;
                vertical-align: sub;
            }
        }
    }
}
