main {
    background: var(--background-color);
}

.hero-overview {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1vw;
    place-items: flex-start center;
    max-width: var(--content-max-width-large);
    margin-top: 2rem;
    position: relative;
}

.thumbnail {
    filter: drop-shadow(0px .5rem .5rem rgba(0, 0, 0, 0.25));
}

.thumbnail-wrap .thumbnail img {
    aspect-ratio: 1/1;
    width: 100%;
    object-fit: cover;
    transition: .3s;
}

.thumbnail-wrap .thumbnail-description {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    background: white;
    padding: 1em;
    width: 90%;
    opacity: 0%;
    will-change: transform, opacity;
    display: flex;
    flex-direction: column;
    box-shadow: 0rem .5rem .75rem -.25rem rgba(0, 0, 0, 0.25);
    transition: .3s;
}

.shop-concept .button {
    background-color: var(--shop-concept-color);
}

.solar-concept .button {
    background-color: var(--solar-concept-color);
}

.smarthome-concept .button {
    background-color: var(--smarthome-concept-color);
}

.thumbnail-wrap .thumbnail-description .button {
    align-self: flex-end;
    margin-top: 1em;
}

.thumbnail-wrap h2 {
    font-size: 1.2em;
}

@media (hover: hover) and (pointer: fine) {
    .thumbnail-wrap .thumbnail img {
        clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);
    }
    
    .thumbnail-wrap:hover .thumbnail img {
        clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0% 100%);
    }

    .thumbnail-wrap:hover .thumbnail-description {
        opacity: 100%;
        transform: translate(-50%, -50%);
    }
}

.hero-logo {
    margin: 1rem auto 0;
    max-height: 4rem;
    object-fit: contain;
    display:block
}

#info-section img {
    box-shadow: 0 .5rem 1.5rem -.75rem rgba(0, 0, 0, 0.5);
}

/* Mobile styles */
@media screen and (max-width:1240px) {
    .hero-overview {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 2rem;
        width:95%
    }

    .hero-overview .thumbnail-description {
        opacity: 1;
        position: relative;
        transform: translate(0, 0);
        top: 0;
        left: 0;
        box-shadow: unset;
        padding: 0;
        width: unset;
        margin-top: 1em;
        background: transparent;
    }

    .thumbnail-wrap .thumbnail-description .button {
        align-self: flex-start;
    }

    .thumbnail-wrap .thumbnail img {
        aspect-ratio: 1/1;
    }

    .hero-logo {
        margin:0;
        position:absolute;
        top:2rem;
        left:50%;
        transform:translatex(-50%);
        background: var(--background-color);
        padding:1rem;
        max-height: 5rem;;
    }
}

@media screen and (max-width:980px) {
    #info-section {
        --grid-max-columns: 1;
    }

    #info-section img {
        aspect-ratio: 2/1;
    }
}

@media screen and (max-width:820px) {
    .hero-overview {
        grid-template-columns: 1fr;
        gap: 2rem;
        width:95%
    }

    .thumbnail-wrap .thumbnail img {
        aspect-ratio: 2/1;
    }
}