/* Hero Styles */
.hero-area {
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: 100vh;
    min-height: 100svh;
}

.hero {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
    padding: 0;
    gap: 1rem;
    background-image: url('../images/desktop/tools/zerspanung-wasser.webp'), url('../images/desktop/tools/fraeskopf.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 80%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.hero .title-area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 1rem;
    max-width: 100%;
}

.hero .title-area .content {
    background: white;
    padding: 1rem;
}

.hero .continue-button {
    fill: var(--background-color);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translatex(-50%);
}

.hero .continue-button svg {
    height: 4rem;
    will-change: transform;
}

.hero .continue-button:hover svg,
.hero .continue-button:focus svg {
    transform: translatey(-5px);
}

.title-area h1,
.title-area p {
    color: currentColor;
}

.hero .logo img {
    max-height: 5svh;
}

.products {
    padding: 1rem 2vw;
}

.products h2,
.products h3,
.products p {
    color: currentColor;
}

.products h2 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1em;
}

.product-wrap {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.product-wrap span {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}

.product-wrap span p {
    font-size: .8rem;
    margin-bottom: .1em;
}

.product-wrap .product img {
    aspect-ratio: 16/9;
    width: 100%;
    object-fit: contain;
    object-position: center;
}

.product-wrap .product .button {
    margin: auto 0 0 auto;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
}

.product {
    padding: .5rem 1rem;
    display: flex;
    flex-direction: column;
}

.product:not(:nth-child(5n))::after {
    --line-width: 2px;
    content: '';
    position: absolute;
    right: 0;
    top: 0%;
    bottom: 0%;
    width: var(--line-width);
    transform: translatex(calc(var(--line-width) / 2));
    background-color: var(--secondary-color);
}

/* Content Section Styles */
.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: calc(var(--content-max-width)*2);
    align-items: center;
    gap: 1rem;
}

main img,
.about-us img {
    box-shadow: 0 .25rem 1.5rem -.5rem black;
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
}

.certificate img {
    box-shadow: 0 .25rem 1.5rem -.5rem black;
}

@media screen and (max-width:1200px),
(orientation:portrait) {
    .hero .content {
        width:100%;
    }

    .continue-button {
        display:none;
    }
    
    .product-wrap {
        display: grid;
        grid-template-columns: 1fr;
    }

    .product {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr auto 1fr;
        gap: .5rem 1rem;
    }

    .product-wrap .product img {
        aspect-ratio: 4/3;
        width: 100%;
        object-fit: cover;
        object-position: left;
    }

    .product-wrap .product .button {
        margin: 0 0 auto 0;
    }

    .product>span {
        grid-column: 2;
        grid-row: 1;
    }

    .product>picture {
        grid-column: 1;
        grid-row: 1 / 4;
    }

    .product>p {
        grid-column: 2;
        grid-row: 2;
    }

    .product>a {
        grid-column: 2;
        grid-row: 3;
    }

    .product:not(:nth-child(5n))::after {
        display: none;
    }

    .product:not(:nth-child(5n)) {
        border-bottom: 2px solid black;
    }

    .content-grid {
        display: grid;
        grid-template-columns: 1fr;
        max-width: var(--content-max-width);
        align-items: center;
        gap: 1rem;
    }

    .about-us .content {
        order:2;
    }

    .about-us picture {
        order:1;
    }
}

@media screen and (max-width:500px) {
    .product {
        display: flex;
    }

    .product span {
        order: 2;
    }

    .product picture {
        order: 1;
    }

    .product-wrap .product img {
        aspect-ratio: 16/9;
        object-fit: contain;
        object-position: center;
    }

    .product p {
        order: 3;
    }

    .product a {
        order: 4;
    }
}