article,
.article {
    font-size: 20px;
    border-radius: 10px;
    overflow-wrap: anywhere;

    strong {
        color: @secondary;
        font-weight: 600;
    }

    &.top,
    &.top-of-content,
    &.end-of-content {
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        background-color: @surface;
        color: @on-surface;
        display: flex;
        flex-direction: column;

        .article-image {
            min-height: 200px;
            background-size: cover;
            background-position: top center;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 10px 20px;
            color: #f1ebe4;
            text-shadow: 0 2px 10px #000;
            overflow-wrap: anywhere;
            flex-grow: 1;
        }

        .article-title {
            font-size: 32px;
            font-weight: 600;
            overflow-wrap: anywhere;
        }

        .article-subtitle {
            font-size: 20px;
            overflow-wrap: anywhere;
        }

        .article-content {
            padding: 20px;
            overflow-wrap: anywhere;

            .article-subtitle {
                font-size: @font-size-default;
            }
        }

        &.end-of-content {
            .article-image {
                height: 400px;
            }
        }

        .article-link {
            background: @primary;
            color: @on-primary;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            height: 44px;
            font-size: 20px;
            font-weight: 700;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
    }

    ul {
        list-style-type: none;
        padding-left: 0px;

        li {
            background-image: url("../css/theme/components/img/arrow-right-3.png");
            background-repeat: no-repeat;

            line-height: 30px;
            padding-left: 35px;
            color: @primary;
            font-weight: 700;
            font-size: 20px;
        }
    }

    .article-content {
        strong {
            color: @primary;
            font-weight: 600;
        }

        .article-title:not(h1) {
            color: @primary;
            font-size: 32px;
            font-weight: 700;
            margin-bottom: @space-sm;
        }

        .article-subtitle {
            color: @secondary;
            font-size: 20px;
            font-weight: 700;
            margin-bottom: @space-md;
        }
    }

    &.content {
        margin-bottom: @space-lg;

        .article-link {
            border: 1px solid @primary;
            border-bottom: 3px solid #c4253e;
            color: @primary;
            font-size: 18px;
            font-weight: 700;
            padding: 5px 10px;
            border-radius: 10px;
            transition: @transition-default;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            gap: @space-sm;
            text-decoration: none;
            cursor: pointer;

            &:hover {
                background: @on-primary;
                color: @primary;
                box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
            }
        }
    }

    &.end-of-content {
        .article-image {
            justify-content: flex-start;

            .article-title {
                margin-top: 20px;
                color: #fff;
                font-family: "Caveat", sans-serif;
                text-shadow: none;
                font-size: 72px;
                line-height: 72px;
                font-weight: 700;
                padding-right: 10%;
            }
            .article-subtitle {
                color: #fff;
                font-family: "Caveat", sans-serif;
                text-shadow: none;
                font-size: 32px;
                font-weight: 700;
            }
        }
    }

    &.article-details {
        img {
            border-radius: 10px;
            width: 300px;
            display: inline-block;

            &.layout-1 {
                float: left;
                margin: 0 @space-md @space-md 0;
            }
            &.layout-2 {
                float: right;
                margin: 0 0 @space-md @space-md;
            }
        }

        .article-subtitle {
            font-size: 24px;
        }

        .article-link {
            margin-top: @space-lg;
            border: 1px solid @primary;
            border-bottom: 3px solid #c4253e;
            color: @primary;
            font-size: 18px;
            font-weight: 700;
            padding: 5px 10px;
            border-radius: 10px;
            transition: @transition-default;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            gap: @space-sm;
            text-decoration: none;
            cursor: pointer;

            &:hover {
                background: @on-primary;
                color: @primary;
                box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
            }
        }
    }
}
