@import "src/css/style.css";

/* CONSTANTS */
:root {
    --image-size: 325px;
    --max-height: 600px;
    --scaling-factor: 0.7; /*0.7*/
    --offset-factor: 0.5; /*0.5*/
    --image-border: 0.2em solid white;
}

/* IMAGE STACK CONTAINER */
.homepage-image-stack {
    width: 100%;
    max-width: var(--image-size);

    height: var(--max-height);

    padding: 1em;

    display: flex;
    flex-direction: row;
    align-items: center;
}

/* LAYERS POSITION AND ALIGNING */
.layer-back,
.layer-mid,
.layer-top {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.layer-mid, .layer-top {
    margin-left: calc(0px - var(--image-size));
}

.layer-top {
    height: var(--image-size);
}

.layer-mid {
    height: calc(var(--image-size) * (1 + 2 * var(--offset-factor)));
}

.layer-back {
    height: calc(var(--image-size) * (1 + 2 * var(--offset-factor)) * (1 + 2 * var(--offset-factor) * var(--offset-factor)));
}


.layer-back, .layer-mid {
    justify-content: space-between;
}

.layer-top {
    justify-content: center;
    height: var(--image-size);
}

/* IMAGE PROPERTIES */
.stack-img {
    width: auto;
    height: auto;

    object-fit: cover;
    object-position: center;

    display: block;
    border: var(--image-border);

    box-shadow:
            0 0 5px 0 white,
            0 0 75px 30px black;
}

.layer-top .stack-img {
    /*transform: scale(1);*/
    width: var(--image-size);
    height: var(--image-size);

    z-index: 10;
}

.layer-mid .stack-img {
    /*transform: scale(var(--scaling-factor));*/
    width: calc(var(--image-size) * var(--scaling-factor));
    height: calc(var(--image-size) * var(--scaling-factor));
    margin: 0 auto;

    filter: brightness(0.8);
    z-index: 5;
}

.layer-back .stack-img {
    /*transform: scale(calc(var(--scaling-factor) * var(--scaling-factor)));*/
    width: calc(var(--image-size) * var(--scaling-factor) * var(--scaling-factor));
    height: calc(var(--image-size) * var(--scaling-factor) * var(--scaling-factor));
    margin: 0 auto;

    filter: brightness(0.5);
}

/* PAGE CONTENT */
.content {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: center;

    margin: 0 10%;
    padding: 2rem;

    gap: 5rem;
}

.text {
    margin: 2em;
    padding: 0.5em;

    width: 65%;

    justify-content: center;
    align-items: center;
}