.pattern {
    z-index:0;
    position: absolute;
    top: 0;
    opacity: 0.1;
    right: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(45deg, #1b2040, #071029);
    overflow: hidden;
}

@media (max-width: 1200px) {
    .pattern {
        height: calc(100vh - var(--site-header-height));
    }
}

.pattern:before {
    content: "";
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: full;
    height: full;
    opacity: 0.45;
    background: radial-gradient(rgba(255, 255, 255, 0), theme("colors.black.500"));
}

.pattern-container {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(6, 1fr);
    width: 1640px;
    height: 1080px;
    transform: rotate(45deg) scale(1.75) translate3d(19%, -31%, 0);
}

@media (max-width: 1440px) {
    .pattern-container {
        width: 1140px;
        hight: 948px;
    }
}

@media (max-width: 1200px) {
    .pattern-container {
        width: 1000px;
        height: 500px;
        transform: rotate(45deg) scale(2.75) translate3d(14%, 17%, 0);
    }
}

@media (max-width: 768px) {
    .pattern-container {
        width: 500px;
        height: 400px;
        transform: rotate(135deg) scale(2.75) translate3d(12%, 1%, 0);
    }
}

.pattern-container span {
    -webkit-animation: breathe 25s infinite;
    animation: breathe 25s infinite;
}

    .pattern-container span:nth-child(1) {
        position: relative;
        grid-column: span 3;
        grid-row: span 3;
        background: #68ddff;
    }

        .pattern-container span:nth-child(1):after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: calc(100% - 95px);
            background: linear-gradient(to right, transparent, #9ae5ff);
        }

    .pattern-container span:nth-child(2) {
        z-index:0;
        grid-column: span 2;
        grid-row: span 3;
        background: linear-gradient(45deg, #2c3155, #0c142f);
        -webkit-animation: breathe2 25s infinite;
        animation: breathe2 25s infinite;
    }

    .pattern-container span:nth-child(3) {
        position: relative;
        grid-column: span 1;
        grid-row: span 3;
        background-color: #11173c;
    }

        .pattern-container span:nth-child(3):after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: calc(100% - 95px);
            background: linear-gradient(to top, #d9d9d9, #a5a5a5, #c3c3c3);
        }

@media (max-width: 768px) {
    .pattern-container span:nth-child(3):after {
        height: calc(100% - 35px);
    }
}

.pattern-container span:nth-child(4) {
    grid-column: span 4;
    grid-row: span 7;
    background-color: #151a3a;
}

.pattern-container span:nth-child(5) {
    grid-column: span 3;
    grid-row: span 2;
    background: linear-gradient(to right, #d9d9d9, #a5a5a5, #c3c3c3);
}

.pattern-container span:nth-child(6) {
    grid-column: span 2;
    grid-row: span 2;
    background: linear-gradient(45deg, #2c3155, #0c142f);
    -webkit-animation: breathe2 25s infinite;
    animation: breathe2 25s infinite;
}

.pattern-container span:nth-child(7) {
    grid-column: span 1;
    grid-row: span 2;
    background: linear-gradient(225deg, #d9d9d9, #a5a5a5, #c3c3c3);
}

@-webkit-keyframes breathe {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(20%);
    }
}

@keyframes breathe {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(20%);
    }
}

@-webkit-keyframes breathe2 {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(40%);
    }
}

@keyframes breathe2 {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(40%);
    }
}