@media(max-width: 1399px) {
    .news-box-img {
        height: 150px;
    }

    .news-box.large .news-box-img {
        height: 284px;
    }
}

@media(max-width: 1199px) {
    .news-box-img {
        height: 168px;
    }

    .news-box.large .news-box-img {
        height: 234px;
    }
}

@media(max-width: 991px) {
    .news-inner-content .content-box {
        margin-top: 40px;
    }

    .news-box-img {
        height: 186px;
    }

    .news-box.large {
        flex-direction: column;
    }

    .news-box.large .news-box-img {
        width: 100%;
        height: 350px;
        margin-bottom: 20px;
    }

    .news-box.large .news-box-text {
        padding-left: 0;
    }
}

@media(max-width: 767px) {

    /* Globals */
    :root {
        /* Font size - Heading */
        --fs-h1: 20px;
        --fs-h2: 16px;
        --fs-h3: 16px;

        /* Line height - Heading */
        --lh-h1: 30px;
        --lh-h2: 24px;
        --lh-h3: 24px;

        /* Font size - Basic */
        --fs-b1: 18px;
        --fs-b2: 16px;
        --fs-b3: 14px;
        --fs-b4: 12px;
        --fs-b5: 12px;

        /* Line height - Basic */
        --lh-b1: 28px;
        --lh-b2: 24px;
        --lh-b3: 20px;
        --lh-b4: 18px;
        --lh-b5: 18px;
    }


    /* Basics */

    .section-header {
        margin-bottom: 20px;
        text-align: center;
    }

    .section-header p {
        margin-top: 20px;
    }

    .pagination {
        margin-top: 32px;
    }

    .content-space-around-lg, .content-space-around-md, .content-space-around-sm {
        padding: 20px;
    }

    .content-space-lg, .content-space-md, .content-space-sm {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .btn-login-with {
        padding: 12px 14px;
    }

    .btn-login-with:not(:last-child) {
        margin-bottom: 8px;
    }

    #mobileSearchModal .modal-header {
        border-bottom: 1px solid var(--ht-gray-2);
        margin-bottom: 12px;
    }

    #mobileSearchForm .search-wrapper {
        padding: 0 20px;
    }

    #mobileSearchForm .search-wrapper #searchInput {
        width: 100%;
    }

    .btn-general {
        padding: 10px 20px;
        height: 42px;
    }

    .btn-general.large {
        height: 52px;
        padding: 12px 24px;
    }

    .form-general-control {
        height: 42px;
    }

    .form-general-label {
        margin-bottom: 10px;
    }

    .search-wrapper {
        padding: 0 24px;
    }

    #searchForm.expand .search-wrapper #searchInput {
        width: 120px;
    }

    /* Header */
    .header-logo img {
        height: 32px;
    }

    /* News box */
    .news-inner-content .content-box {
        margin-top: 30px;
    }

    .news-box {
        width: 100%;
        max-width: 312px;
        height: auto;
        margin: 0 auto;
    }

    .news-box-img, .news-box.large .news-box-img {
        width: 100%;
        height: 172px;
    }

    .news-box-text .news-desc {
        display: none;
        font-size: var(--fs-b3);
        line-height: var(--lh-b3);
        margin-bottom: 12px;
    }

    .news-box-text .news-title {
        margin-bottom: 12px;
    }

    .footer-logo {
        width: 184px;
    }

    .footer-logo, .hattrick-apps, .usefull-links {
        justify-content: center;
        align-items: center;
        text-align: center;
        margin: 0 auto;
    }

    .not-found-header h1 {
        font-size: 80px;
    }

    .not-found-header p {
        margin-top: 8px;
    }

    .not-found-header .btn-general {
        margin-top: 24px;
    }
}

@media(max-width: 575px) {

    /* Basics */
    body {
        padding-top: 72px;
    }

    /* Header */
    .header-content {
        padding: 16px 0;
    }

    .header-logo img {
        height: 28px;
    }

    .header-right>.btn-text {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* News */
    .news-inner-sub-info {
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .share>* svg {
        width: 18px;
        height: 18px;
    }

    .news-comments .section-header {
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .news-comments-wrapper {
        padding: 0;
    }

    .comment-item .user-image, .add-comment .user-image {
        width: 40px;
        height: 40px;
    }

    .comment-item .user-info .user-message {
        padding-right: 0;
    }

    .comment-item.reply {
        padding-left: 78px;
    }

    .comment-item-wrapper:not(:last-child), .comment-item:not(:last-child) {
        margin-bottom: 20px;
    }

    .new-comment-box .new-comment-input {
        height: 40px;
        padding: 6px 40px 6px 16px;
    }

    .new-comment-box .btn-add-new-comment {
        width: 40px;
        height: 40px;
    }
}