.hero {
    background-image: url('../images/desktop/protectors/m-protector.webp'), url('../images/desktop/protectors/m-protector.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-mask-image: linear-gradient(to bottom, white 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, white 80%, transparent 100%);
    justify-content: flex-start;
    align-items: flex-start;
}

.hero .logo {
    width: 20rem;
    max-width: 50vw;
}

.hero-image {
    display: none;
}

.social-items {
    display: flex;
    gap: .5rem;
    align-items: center;
    margin: .5rem 0;
}

.social-items picture {
    filter: drop-shadow(0 0 .15rem rgba(0, 0, 0, 0.25));
}

.custom-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    place-items: center;
    gap: 1rem;
}

main {
    gap: 4vw;
}

main .grid-layout {
    max-width: calc(var(--content-max-width) * 2);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

main .grid-layout h3 {
    margin-top: 1em;
}

.more-products h3 {
    text-align: center;
}

.more-products .button {
    padding: .25em .5em;
    display: inline-block;
    margin-left: .25em;
}

.section-with-bg {
    background-image: url('../images/desktop/protectors/steckdosen.webp'), url('../images/desktop/protectors/steckdosen.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

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

.section-with-bg img {
    max-height: 5rem;
    width: auto;
    margin: auto;
    filter: brightness(0%);
}

/* Mobile styles */
@media screen and (max-width:980px),
(orientation:portrait) {
    .hero-image {
        display: block;
    }

    .hero {
        padding:2rem 0;
        background-image: none;
        -webkit-mask-image: none;
        mask-image: none;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .title-area {
        display:flex;
        flex-direction:column;
        align-items:center;
    }

    .custom-grid {
        grid-template-columns: 1fr;
        place-items: stretch;
    }

    main .grid-layout {
        grid-template-columns: repeat(1, 1fr);
        gap:2.5rem;
    }
}

@media (max-width: 525px) {
    .grid-layout-three {
        --grid-max-columns: 1;
    }
}