/*
AANBOD

omvat de beschikbare diensten
*/

#aanbod{
    display:flex;
    flex-direction: column;
    text-align: center;
}
.services
{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:var(--spacing-medium);
    width: fit-content;
    margin-inline:auto;
    padding-block:var(--spacing-large);

    color:var(--color-accent-not-black);
    
}

#aanbod h2{
    color:var(--color-accent-not-white);
    z-index: 100;;
    
}

.service{
    height:360px;
    min-width: 240px;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    /* border:1px solid black; */
    box-shadow: 1px 1px 5px #0004;

    background-color: var(--color-accent-not-white);
    padding-inline:var(--spacing-small);
    padding-block:var(--spacing-tiny);
    text-align: center;
    transition: 0.3s;

    overflow: hidden;
    position: relative;
}

/*only on devices that support hover*/
@media (hover: hover){
    .service:hover{
        /* transform: scale(1.02); */
        box-shadow:var(--box-shadow-glow);
    
        & p {
            color:var(--color-accent-not-black);
        }
    }
}


.service > .service-icon{
    background-size: contain;
    height:7em;
    width: 7em;
    padding:0;
    margin-inline: auto;
    margin-top:auto;
    margin-bottom: var(--spacing-tiny);
    margin-bottom: 0;
    filter:sepia(1) hue-rotate(180deg) brightness(0.45) saturate(2);
}

#service-vintage > img{
    right:-70%;
}

#service-brouwerijbezoek > img{
    left:-50%;
}

#service-mobielebar > img{
    left:-50%;
}

.service p{
    font-family: var(--font-sans);
    /* margin-block:var(--spacing-medium); */
    color:var(--color-key);
    z-index: 100;
    transition:0.3s;
    margin:0;
}
.service h3{
    color:var(--color-key);
    border-bottom:1px solid var(--color-key);
    
    font-size: var(--font-size-normal);
    /* box-shadow:0px 2px 1px #0004; */
    z-index: 100;
    margin:var(--spacing-small) var(--spacing-tiny);
    padding-block: var(--spacing-tiny);
}

.value{
    font-family: monospace;
    font-size:var(--font-size-large);
    font-weight: 200;
    word-break:normal;
    /* color:var(--color-accent-not-white); */
    z-index: 100;
    /* background-color: red; */
    min-height: 2.5em;
    text-decoration: underline;
    margin-block-start:auto;
}

.note{
    font-family: var(--font-sans);
    color:var(--color-accent-not-black);
    font-size:var(--font-size-small);
    font-weight:300;
    padding:0.2em;
    color:var(--color-accent-not-black);
}

.info {
    color:var(--color-main);
    padding-block-start:0;
    margin-block-start: var(--spacing-tiny);
    margin-block-end: var(--spacing-tiny);
    /* font-weight: lighter; */
    font-family: var(--font-sans);
    font-style: italic;
    margin-inline: var(--margin-sides);
    text-align: center;
    font-size:var(--font-size-normal);
}

@media only screen and (max-width: 1080px){
    .service h3{
        font-size:var(--font-size-large);
    }

    .services{
        grid-template-columns: 1fr 1fr;
        gap:var(--spacing-medium);
    }

    .service{
        
        width:90vw;
        /* margin-bottom: 1vw; */
        display: flex;
        position: relative;
    }

    .service > .service-icon{
        width:5em;
        height:5em;
    }
}

@media only screen and (max-width: 600px){

    .services{
        grid-template-columns: 1fr;
        gap:var(--spacing-small);
    }

    .service{
        height:min-content;
        min-width: 80vw;
        margin-bottom: 0.5em;
        display: flex;
        position: relative;
    }

    .service > .service-icon{
        padding:var(--spacing-medium);
    }

    
}