.gradient-text {
    background: linear-gradient(135deg,var(--primary-color) 0%,var(--primary-color-darker) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4vw;
    padding: 1vw 4vw;
    min-height: 100vh;
}

.main-image {
    max-width: calc(var(--content-max-width) * 1.4);
    margin: auto;
}

.main-image img {
    aspect-ratio: 1/1;
    width: 100%;
    box-shadow: 0 .15rem 1rem -.5rem black;
    object-fit: cover;
}

main {
    text-align: center;
}

.scroll-down {
    position: absolute;
    bottom: 1vw;
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
    transition: 0.5s ease-in-out;
}

.hide {
    opacity: 0;
}

.scroll-down img {
    max-height: 3.5rem;
}

.section-with-bg {
    background-image: url('../images/desktop/webdesign/desktop_graphic.webp'), url('../images/desktop/webdesign/desktop_graphic.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    clip-path: polygon(0 0, 24% 4%, 54% 0, 82% 4%, 100% 0, 100% 96%, 70% 100%, 45% 95%, 24% 100%, 0 96%);
    padding:8vw 2vw;
}

.lordicon {
    height:auto;
    max-width: 100px;
}

.section-with-bg .content {
    background: var(--background-color);
    padding: 1rem;
    box-shadow: 0 .15rem 1.5rem -.2rem black;
    box-sizing: content-box;
}

@media (max-width: 980px), (orientation: portrait) {
    .scroll-down {
        display:none;
    }

    .main-grid {
        display:blocK;
    }

    .main-image img {
        aspect-ratio:16/9;
    }

    main .title-area h1 {
        font-size: calc(2rem + 1vw);
        margin-top:1rem;
    }

    .main-grid {
        min-height: 10rem;
        padding-top: 4vw;
    }

    .lordicon {
        max-width: 10vw;
    }
}

@media (min-width: 981px) {
    .first-section {
        padding:1vw 2vw 8vw;
    }
}