:root {
    --ff-main: "Archivo Narrow", sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    width: 100%;
    min-height: 100dvh;
    font-family: var(--ff-main);
    color: rgb(255, 255, 255);
    font-size: 20px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    background-color: rgb(0, 0, 0);
    margin: 0;    
}

/* - main - */
main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.text-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    height: auto;
    text-align: center;
}

.main-text {
    font-family: var(--ff-main);
    font-size: 40px;
    font-weight: 600;
    color: rgb(255, 255, 255);
}

.popkoor {
    display: flex;
    justify-content: end;
    align-items: center;
}

.logo-name {
    width: 270px;
    height: 159px;
}

.eindhoven {
    display: flex;
    align-items: center;
}

/* - Image container - */

.image-container {
    width: 100%;
    /* display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center; */
    margin-top: 3rem;
    padding-inline: 2rem;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 2rem;
}

.grid-item {
    font-family: var(--ff-main);
    font-size: 20px;
    font-weight: 400;
    color: rgb(255, 255, 255);
}

.image-wrapper {
    width: max-content;
    height: 100%;
    position: relative;
}

.bass {
    grid-column: 1;
    grid-row-start: 1;
    grid-row-end: 3;
    display: flex;
    justify-content: flex-end;
}

.menu-text {
    position: absolute;
    width: max-content;
    margin: 0;
}

.boeken {
    bottom: 5%;
    left: 25%;
}

.lid {
    bottom: 15%;
    left: 40%;
}

.zien {
    top: 30%;
    left: 5%;
}

.img {
    width: 100%;
    height: 100%;
}

.bas-img {
    max-width: 240px;
    max-height: 362px;
}

.bas-img:hover {
    transform: translate(-5px, -5px);
}

.mic-img {
    max-width: 225px;
    max-height: 170px;
}

.mic-img:hover {
    transform: translate(5px, -5px);
}

.amp-img {
    max-width: 240px;
    max-height: 160px;
}

.amp-img:hover {
    transform: translate(5px, 5px);
}