.sk__rings-section {
    overflow-x: hidden;
    background-image: url(../../images/section-rings-background.svg);
}

.ring-l-container {
    -webkit-filter: blur(13px);
    filter: blur(13px);
}

.ring-m-container {
    -webkit-filter: blur(7.5px);
    filter: blur(7.5px);
}

.ring-s-container {
    -webkit-filter: blur(2px);
    filter: blur(2px);
}

@media all and (min-width: 576px) and (max-width: 767px) {
    .ring-l-container {
        -webkit-filter: blur(8px);
        filter: blur(8px);
    }

    .ring-m-container {
        -webkit-filter: blur(4px);
        filter: blur(4px);
    }

    .ring-s-container {
        -webkit-filter: blur(1.5px);
        filter: blur(1.5px);
    }
}

@media all and (max-width: 575px) { 
    .ring-l-container {
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }

    .ring-m-container {
        -webkit-filter: blur(2px);
        filter: blur(2px);
    }

    .ring-s-container {
        -webkit-filter: blur(1.5px);
        filter: blur(1.5px);
    }
}

.ring-l,
.ring-m,
.ring-s {
    position: relative;
    border-radius: 100%;
}

    .ring-l:after,
    .ring-m:after,
    .ring-s:after {
        content: "";
        position: absolute;
        border-radius: 100%;
    }

    .ring-l.landscape {
        width: 785px;
        height: 785px;
    }

    .ring-l.portrait {
        width: 100vw;
        height: 100vw;
    }

    .ring-l:after {
        top: 10px;
        left: 10px;
        width: calc(100% - 20px);
        height: calc(100% - 20px);
    }

    .ring-m.landscape {
        width: 610px;
        height: 610px;
    }

    .ring-m.portrait {
        width: 77.707vw;
        height: 77.707vw;
    }

    .ring-m:after {
        top: 7.5px;
        left: 7.5px;
        width: calc(100% - 15px);
        height: calc(100% - 15px);
    }

    .ring-s.landscape {
        width: 432px;
        height: 432px;
    }

    .ring-s.portrait {
        width: 55.0318vw;
        height: 55.0318vw;
    }

    .ring-s:after {
        top: 3px;
        left: 3px;
        width: calc(100% - 6px);
        height: calc(100% - 6px);
    }

.sk__rings-section .sk__rectangles {
    -webkit-transform: translateX(11vw);
    -ms-transform: translateX(11vw);
    transform: translateX(11vw);
}

@media all and (min-width: 576px) and (max-width: 767px) { /* sm */
    .sk__rings-section .sk__rectangles {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}