.link-list {
    @apply p-8 relative;

    .link-list-ul {
        column-count: 1;

        @screen sm {
            column-count: 2;
        }
    }

    .link-list-li {
        margin: 8px 0;
    }

    .link-list-li-icon {
        margin: 0;
        display: flex;
        align-items: center;
    }

    .link-list-header {
        display: flex;
        align-items: center;

        margin-bottom: 1.5rem;

        .link-list-header-icon {
            @apply text-red;

            margin-right: 10px;
        }

        .heading {
            @apply text-black;

            margin: 0;
        }
    }

    .link-list-icon-header {
        display: flex;
    }

    .header-tag {
        display: flex;
        align-items: start;
        flex-direction: column;

        .link-list-header-tag {
            flex-shrink: 0;
            margin-left: 0px;
            margin-top: 8px;
        }

        @screen sm {
            align-items: start;
            flex-direction: row;

            .link-list-header-tag {
                margin-left: 8px;
                margin-top: 0px;
            }
        }
    }

    &.transparent {
        @apply p-0 text-black;

        a {
            @apply text-black;
        }
    }

    &.red {
        @apply bg-red text-white;

        .heading {
            @apply text-white;
        }

        a,
        .icon {
            @apply text-white;
        }

        &:before {
            content: '';
            @apply w-0 h-0 absolute;
            top: -17px;
            left: 32px;
            border-left: 12px solid transparent;
            border-right: 12px solid transparent;
            border-bottom: 18px solid #e03131;
        }
    }

    &.red-simple {
        @apply bg-red text-white;

        .heading {
            @apply text-white;
        }

        a,
        .icon {
            @apply text-white;
        }
    }

    &.gray {
        @apply bg-gray text-black;

        a {
            @apply text-black;
        }
    }

    &.white {
        @apply bg-white text-black shadow-xl;

        a {
            @apply text-black;
        }
    }

    &.white-red {
        @apply bg-white text-black shadow-xl;

        a {
            @apply text-black;
        }
    }

    .title {
        @apply font-semibold mb-6;
    }

    li {
        .link {
            .icon {
                @apply no-underline hover:no-underline;
            }

            .icon + .text {
                @apply ml-4;
            }
        }
    }

    .link-bottom-line {
        border-bottom: 0.1rem solid #e3e3e3;
    }

    .button {
        @apply mt-2;
    }

    .button-link-margin {
        @apply mt-4;
    }

    .link-list-bottom-link {
        a {
            @apply text-red;
        }
    }
}

@screen md {
    .link-list-header-icon {
        font-size: 24px;
    }
}