@import url('./variable.css');
@import url('./fonts.css');




main {
    gap: var(--gap-big);
}




#ceramic,
#woodworking,
#dev,
#blender- {
    position: absolute;
    top: calc(-1*var(--gap-big));
}


.ceramic,
.woodworking,
.dev,
.blender- {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: var(--gap-small);
}



.img-grid-2 {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-small);
}

.img-grid-4 {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: var(--gap-small);
}

.height-main {
    height: var(--height-main);
}

.img-grid-4 a {
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius);
}

.main-ceramic {
    background-image: url(/assets/img/prototyping/ceramic.webp);
}

.main-woodworking {
    background-image: url(/assets/img/prototyping/woodworking.webp);
}

.main-dev {
    background-image: url(/assets/img/prototyping/Dev.webp);
}

.main-blender {
    background-image: url(/assets/img/prototyping/blender.webp);
}




.bande-presentation {
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: var(--gap-small);

    padding: var(--padding-big);
    border-radius: var(--border-radius);
    background-color: var(--color-white);
}





.ceramic,
.woodworking,
.dev,
.blender {
    grid-column-gap: var(--gap-small);
    grid-row-gap: var(--gap-small);
}




.ceramic {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, auto);
}

.ceramic-1 {
    grid-area: 1 / 1 / 2 / 3;
}

.ceramic-2 {
    grid-area: 2 / 1 / 3 / 2;
}

.ceramic-3 {
    grid-area: 2 / 2 / 3 / 3;
}

.ceramic-4 {
    grid-area: 3 / 1 / 4 / 2;
}

.ceramic-5 {
    grid-area: 3 / 2 / 4 / 3;
}

.ceramic-6 {
    grid-area: 1 / 3 / 4 / 5;
    height: 100%;
}






.woodworking {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, auto);
}

.woodworking-1 {
    grid-area: 1 / 1 / 4 / 3;
    height: 100%;
}

.woodworking-2 {
    grid-area: 1 / 3 / 2 / 5;
}

.woodworking-3 {
    grid-area: 2 / 3 / 4 / 4;
}

.woodworking-4 {
    grid-area: 2 / 4 / 4 / 5;
}








.dev {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
}

.dev-1 {
    grid-area: 1 / 1 / 2 / 2;
}

.dev-2 {
    grid-area: 2 / 1 / 4 / 2;
    height: 100%;
}

.dev-3 {
    grid-area: 1 / 2 / 3 / 3;
    height: 100%;
}

.dev-4 {
    grid-area: 3 / 2 / 4 / 3;
}







.blender {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, auto);
}

.blender-1 {
    grid-area: 1 / 1 / 4 / 3;
    height: 100%;
}

.blender-2 {
    grid-area: 1 / 3 / 2 / 5;
}

.blender-3 {
    grid-area: 2 / 3 / 3 / 4;
}

.blender-4 {
    grid-area: 2 / 4 / 3 / 5;
}

.blender-5 {
    grid-area: 3 / 3 / 4 / 4;
}

.blender-6 {
    grid-area: 3 / 4 / 4 / 5;
}

.blender-7 {
    grid-area: 1 / 5 / 4 / 6;
    height: 100%;
}