.hero {
    z-index: 1;
    padding: 0rem;
    background: rgb(84, 199, 217);
    background: linear-gradient(180deg, rgba(84, 199, 217, 1) 10%, rgba(255, 255, 255, 1) 10%);
}

.hero * {
    color: white;
    text-shadow: .05em .05em black;
}

.hero .background-area {
    background-color: #222;
    background-image: url('../images/desktop/handrails/handrail-outdoors.webp'), url('../images/desktop/handrails/handrail-outdoors.jpeg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
    width: 95%;
    max-width: 60rem;
    box-shadow: 0rem .5rem 2rem -.5rem rgba(0, 0, 0, 0.5);
    display: grid;
    place-items: flex-end center;
    padding: 4rem;
    border-radius: 0rem 0rem 10rem 10rem;
}

.call-us {
    
    text-align: center;
}

.call-us .content {
    max-width: 60rem;
    align-items: center;
    justify-content: center;
    gap:.5rem;
}

.section-with-bg {
    background-image: url('../images/desktop/handrails/handrail-white.webp'), url('../images/desktop/handrails/handrail-white.jpeg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    place-items: center flex-start;
    padding:var(--section-padding-bigger);
    clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%);
    @media screen and (max-width:980px), (orientation:portrait) {
        place-items: center;
    }
}

.section-with-bg .content {
    background: var(--background-color);
    padding: 1rem;
    box-shadow: 0 .15rem 1.5rem -.2rem black;
    max-width: 40ch;
    margin-left: 8em;
    @media screen and (max-width:980px), (orientation:portrait) {
        margin:0em;
    }
}

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