@media(min-width: 768px) {
    .columns-2 {
        column-count: 2;
        column-gap: 30px;
    }
    .audio-block-1 {
        border-right: 1px solid #E1DFC8;
    }
    .audio-block-2 {
        border-left: 1px solid #E1DFC8;
    }
}

@media(min-width: 990px) {
    .dino-start {
        margin-left: -30%;
        width: 130% !important;
    }
    .levels-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media(min-width: 1200px) {
    .dino-start {
        margin-left: -30%;
        margin-right: -20%;
        width: 150% !important;
    }
    .game-area {
        border-top-left-radius: 20px;
    }
}

@media(max-width: 1200px) {
    .header-view .header-img {
        right: -18%;
    }
    .game-tab, .era-tab {
        border-radius: 10px;
        height: 80px;
    }
    .logo-img {
        height: 80px;
        object-fit: contain;
        object-position: left;
    }
    .game-page-row {
        display: grid;
        grid-template-rows: auto 1fr;
        grid-template-columns: 100%;
    }
    .game-area-wrapper {
        grid-template-rows: 1fr;
    }
}

@media(max-width: 990px) {
    .header-view .header-img {
        right: -25%;
    }
    .m-72, .mf-72 {
        font-size: 3.5em;
    }
    .header-dino {
        width: 100%;
        margin-left: 0;
    }
    .levels-row, .progress-row {
        width: 150% !important;
    }
}

@media(max-width: 768px) {
    .header-view {
        min-height: unset;
    }
    .header-view .header-img {
        position: static;
        height: auto !important;
        width: 140%;
        margin-left: -20%;
        margin-top: -300px;
        margin-bottom: -100px;
    }
    .mez-72, .m-72, .mf-72, .r-64 {
        font-size: 3em;
    }
    .reviews .slick-track {
        align-items: stretch;
    }

    .reviews.triple-slick .slick-track {
        margin-left: 0;
    }

    .reviews .slick-track .slick-slide {
        height: auto
    }

    .reviews .slick-track .slick-slide>div {
        height: 100%;
    }
    .navbar-light {
        position: sticky !important;
    }
    .navbar-light .nav-item:not(:last-child) {
        border-bottom: 1px solid #EAEAEA;
    }
    .levels-row, .progress-row {
        width: 200% !important;
    }
}

@media(max-width: 576px) {
    .dinos-slider .slick-dots {
        display: none !important;
    }
    .era-indicator {
        background-color: #FFFFFF;
    }
    .era-indicator.active {
        color: #FFFFFF;
        background: #7328D2;
        box-shadow: 0px 10px 16px rgba(0, 0, 0, 0.08);
        position: relative;
    }
    .era-indicator.active:before {
        content: url('data:image/svg+xml; utf8, <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.42331 0.18509C7.64766 0.409441 7.66806 0.760513 7.4845 1.0079L7.42331 1.07878L1.97238 6.53L7.42331 11.9812C7.64766 12.2056 7.66806 12.5566 7.4845 12.804L7.42331 12.8749C7.19896 13.0993 6.84788 13.1197 6.60049 12.9361L6.52962 12.8749L0.631553 6.97685C0.407202 6.75249 0.386806 6.40142 0.570366 6.15403L0.631553 6.08315L6.52962 0.18509C6.7764 -0.0616965 7.17652 -0.0616965 7.42331 0.18509Z" fill="white"/></svg>');
        position: absolute;
        left: 20px;
        top: 0;
        height: 100%;
        display: flex;
        align-items: center;
    }
    .era-indicator.active:after {
        content: url('data:image/svg+xml; utf8, <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.986359 13.8149C0.762008 13.5906 0.741613 13.2395 0.925172 12.9921L0.986359 12.9212L6.43729 7.47L0.986359 2.01878C0.762008 1.79443 0.741613 1.44336 0.925172 1.19597L0.986359 1.12509C1.21071 0.900739 1.56178 0.880342 1.80917 1.0639L1.88005 1.12509L7.77812 7.02315C8.00247 7.24751 8.02286 7.59858 7.8393 7.84597L7.77812 7.91685L1.88005 13.8149C1.63326 14.0617 1.23315 14.0617 0.986359 13.8149Z" fill="white"/></svg>');
        position: absolute;
        right: 20px;
        top: 0;
        height: 100%;
        display: flex;
        align-items: center;
    }
    .levels-row, .progress-row {
        width: 250%;
    }
}

@media(max-width: 526px) {
    .header-view .header-img {
        margin-top: -200px;
    }
    .mez-72, .m-72, .mf-72, .r-64 {
        font-size: 2em;
    }
    .dinos-slider .slick-dots li:not(.slick-active) button:before {
        display: none;
    }
}