html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #f6f5f1; /* Matchende beige kleur voor het hele scherm */
    display: flex;
    justify-content: center;
    align-items: center;
}

.art-card {
    position: relative;
    max-width: 800px;
    width: 95%;
    box-shadow: 0 12px 35px rgba(58, 53, 42, 0.06);
    border-radius: 4px;
    overflow: hidden;
    line-height: 0;
}

.main-art {
    width: 100%;
    height: auto;
    display: block;
}

/* De laag waarin we de knoppen exact over de getekende labels positioneren */
.button-overlay {
    position: absolute;
    bottom: 5.5%; /* Positie vanaf de onderkant van de afbeelding */
    left: 8.5%;    /* Positie vanaf de linkerkant van de afbeelding */
    width: 83%;   /* Breedte van het totale knoppenblok */
    height: 31%;  /* Hoogte van het totale knoppenblok (2 rijen dik) */
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Verdeelt de ruimte in 4 gelijke kolommen */
    grid-template-rows: repeat(2, 1fr);    /* Verdeelt de ruimte in 2 rijen */
    gap: 12px 18px; /* Ruimte tussen de knoppen */
}

/* De algemene eigenschappen van de onzichtbare knoppen */
.hotspot {
    cursor: pointer;
    background: rgba(255, 255, 255, 0); /* Volledig transparant */
    transition: background 0.2s, transform 0.1s;
    border-radius: 6px;
}

/* Subtiel effect als je met de muis over een knop beweegt */
.hotspot:hover {
    background: rgba(90, 80, 60, 0.04); /* Zachte warme gloed */
    transform: scale(1.02);
}

/* De exacte posities in het raster (grid) */
.vinted       { grid-column: 1; grid-row: 1; }
.facebook     { grid-column: 1; grid-row: 2; }
.yt-creatief  { grid-column: 2; grid-row: 2; }
.yt-allerlei  { grid-column: 3; grid-row: 2; }
.instagram    { grid-column: 4; grid-row: 1; }
.nog-meer     { grid-column: 4; grid-row: 2; }