body {
    background-image: url(../../../img/bg/page/links.png);
}

main {
    background-color: var(--white-10);
}

#page__links-text {
    background-color: var(--white-60);
    margin: 0 -15px 26px;
    padding: var(--spacing-12) 18px var(--spacing-7);
}

.page__links-block {
    margin: 20px -15px 0;
    padding: 45px 19px;
    background-color: var(--white-80);
}

.page__links-block h2 {
    margin-bottom: 34px;
    text-align: center;
}

.page__links-link-block {
    margin-bottom: 33px;
}
    .page__links-block .page__links-link-block:last-child {
        margin-bottom: 0;
    }

.text__title-archive {
    margin-bottom: 6px;
}
    .text__title-archive::before {
        content: '';
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background-color: var(--very-light-brown);
        display: inline-block;
        margin-right: 6px;
        margin-bottom: 2px;
        vertical-align: middle;
    }

.page__links-group-block {
    margin-bottom: 36px;
}
    .page__links-block .page__links-group-block:last-child {
        margin-bottom: 0;
    }
.page__links-group-block > .text__title-archive {
    margin-bottom: var(--spacing-10);
}
    .page__links-group-block > .text__title-archive::before {
        display: none;
    }

.text__link {
    margin-top: 7px;
    border-bottom: none;
    padding-bottom: 0;
}

/*
Media Queries
*/
@media only screen and (min-width: 768px) {

    body {
        background-image: url(../../../img/bg/page/links-md.png);
    }

    #page__links-text {
        margin: 0 -38px 12px;
        padding: var(--spacing-7) 38px 20px;
    }

    .page__links-block {
        margin: 22px -38px 0;
        padding: 45px 62px;
    }

    .page__links-group-block {
        margin-bottom: 38px;
    }
    .page__links-group-block > .text__title-archive {
        margin-bottom: 19px;
    }
    .page__links-link-block {
        margin-bottom: var(--spacing-4);
    }

    .text__title-archive {
        margin-bottom: 2px;
    }
    .text__title-archive::before {
        width: 17px;
        height: 17px;
        margin-right: 7px;
    }
    .text__link {
        margin-top: 0;
    }

}
@media only screen and (min-width: 992px) {

    body {
        background-image: url(../../../img/bg/page/links-lg.png);
    }

    #main__post-block h1 {
        padding-bottom: 6px;
        margin-bottom: 44px;
    }
    #page__links-text {
        margin: 0 auto 23px;
        padding: 0;
        background-color: transparent;
    }

    .page__links-group-block {
        margin-bottom: 34px;
    }
    .page__links-group-block > .text__title-archive {
        margin-bottom: var(--spacing-7);
    }
    .page__links-link-block {
        margin-bottom: 25px;
    }

    .page__links-block {
        margin: var(--spacing-3) 0 0;
        padding: 0;
        background-color: transparent;
    }

    .page__links-block h2 {
        margin-bottom: 25px;
        text-align: left;
        padding-bottom: 13px;
        border-bottom: solid 1px var(--very-light-brown);
    }

    .text__title-archive {
        margin-bottom: 9px;
    }
    .text__title-archive::before {
        width: 11px;
        height: 11px;
    }

    .text__link {
        margin-top: 6px;
    }

}
@media only screen and (min-width: 1690px) {

    body {
        background-image: url(../../../img/bg/page/links-xl.png);
    }

    #page__links-text {
        margin-bottom: 10px;
    }

}

/*
Max Width 767px & DPI 2
*/
@media only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2),
    only screen and (max-width: 767px) and (min--moz-device-pixel-ratio: 2),
    only screen and (max-width: 767px) and (-o-min-device-pixel-ratio: 2/1),
    only screen and (max-width: 767px) and (min-device-pixel-ratio: 2),
    only screen and (max-width: 767px) and (min-resolution: 192dpi),
    only screen and (max-width: 767px) and (min-resolution: 2dppx) {

    body {
        background-image: url(../../../img/bg/page/links@2x.png);
    }

}

/*
Max Width 767px & DPI 3
*/
@media only screen and (max-width: 767px) and (-o-min-device-pixel-ratio: 9/4),
       only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2.25),
       only screen and (max-width: 767px) and (min-device-pixel-ratio: 2.25),
       only screen and (max-width: 767px) and (min-resolution: 2.25dppx) {

    body {
        background-image: url(../../../img/bg/page/links@3x.png);
    }

}

/*
Min Width 768px & DPI 2
*/
@media only screen and (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-width: 768px) and (min--moz-device-pixel-ratio: 2),
    only screen and (min-width: 768px) and (-o-min-device-pixel-ratio: 2/1),
    only screen and (min-width: 768px) and (min-device-pixel-ratio: 2),
    only screen and (min-width: 768px) and (min-resolution: 192dpi),
    only screen and (min-width: 768px) and (min-resolution: 2dppx) {

    body {
        background-image: url(../../../img/bg/page/links-md@2x.png);
    }

}

/*
Min Width 768px & DPI 3
*/
@media only screen and (min-width: 768px) and (-o-min-device-pixel-ratio: 9/4),
       only screen and (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2.25),
       only screen and (min-width: 768px) and (min-device-pixel-ratio: 2.25),
       only screen and (min-width: 768px) and (min-resolution: 2.25dppx) {

    body {
        background-image: url(../../../img/bg/page/links-md@3x.png);
    }

}

/*
Min Width 992px & DPI 2
*/
@media only screen and (min-width: 992px) and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-width: 992px) and (min--moz-device-pixel-ratio: 2),
    only screen and (min-width: 992px) and (-o-min-device-pixel-ratio: 2/1),
    only screen and (min-width: 992px) and (min-device-pixel-ratio: 2),
    only screen and (min-width: 992px) and (min-resolution: 192dpi),
    only screen and (min-width: 992px) and (min-resolution: 2dppx) {

    body {
        background-image: url(../../../img/bg/page/links-lg@2x.png);
    }

}

/*
Min Width 992px & DPI 3
*/
@media only screen and (min-width: 992px) and (-o-min-device-pixel-ratio: 9/4),
       only screen and (min-width: 992px) and (-webkit-min-device-pixel-ratio: 2.25),
       only screen and (min-width: 992px) and (min-device-pixel-ratio: 2.25),
       only screen and (min-width: 992px) and (min-resolution: 2.25dppx) {

    body {
        background-image: url(../../../img/bg/page/links-lg@3x.png);
    }

}

/*
Min Width 1200px & DPI 2
*/
@media only screen and (min-width: 1690px) and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-width: 1690px) and (min--moz-device-pixel-ratio: 2),
    only screen and (min-width: 1690px) and (-o-min-device-pixel-ratio: 2/1),
    only screen and (min-width: 1690px) and (min-device-pixel-ratio: 2),
    only screen and (min-width: 1690px) and (min-resolution: 192dpi),
    only screen and (min-width: 1690px) and (min-resolution: 2dppx) {

    body {
        background-image: url(../../../img/bg/page/links-xl@2x.png);
    }

}