/* Variables */
:root {
    --about-panorama-background-height: calc(0.7 * max(569px, 100vw * 569 / 1920));
}

@supports (-ms-ime-align:auto) {
    /* Edge browser */
    :root {
        --about-panorama-background-height: calc(0.7 * 100vw * 569 / 1920);
    }
}

@media screen and (min-width: 992px) {
    :root {
        --about-panorama-background-height: max(569px, 100vw * 569 / 1920);
    }

    @supports (-ms-ime-align:auto) {
        /* Edge browser */
        :root {
            --about-panorama-background-height: calc(100vw * 569 / 1920);
        }
    }
}

/* Styling */
.about-section {
    /* Parallaxing */
    transform-style: preserve-3d;
    z-index: -1;
}

.about-section .row {
    position: relative;
}

.about-panorama-panel {
    position: relative;
    width: 100%;
    /* Parallaxing */
    height: calc(var(--about-panorama-background-height) - (1.4 - 1.0) * (100vh - var(--about-panorama-background-height)));
    transform-style: preserve-3d;
}

.about-panorama-background {
    background-image: url('../img/about/GAMEDIA-About.jpg?version=9');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    /* Parallaxing */
    width: 100vw;
    height: var(--about-panorama-background-height);
    position: absolute;
    top: calc(-0.5 * (1.4 - 1.0) * (100vh - var(--about-panorama-background-height)));
    left: 0;
    z-index: -1;
    transform: translateZ(-4px) scale(1.4);
}

@supports (-ms-ime-align:auto) {
    /* Edge browser */
    .about-panorama-panel {
        height: calc(var(--about-panorama-background-height));
    }

    .about-panorama-background {
        top: 0;
        transform: initial;
    }
}

.about-logo-background {
    position: absolute;
    width: 180px;
    height: 42px;
    top: 0;
    left: 50%;
    margin-left: -90px;
    background-color: #ffffff;
    z-index: 1;
}

.about-logo {
    position: absolute;
    width: 118px;
    height: 118px;
    left: 50%;
    margin-left: -59px;
    top: -37px;
    background-image: url('../img/Gamedia-Logo.png?version=9');
    background-size: 100% 100%;
    z-index: 2;
}

.about-separator {
    height: 22px;
    margin-top: 20px;
    border-top: 2px solid #000000;
}

.about-header {
    margin-top: 60px;
    text-transform: uppercase;
}

.about-text {
    margin-bottom: 0;
    text-align: justify;
    text-align-last: center;
    line-height: 1.2;
}

.about-team-panel,
.about-awards-panel {
    display: flex;
    align-items: center;
}

.about-team-panel img,
.about-awards-panel img {
    width: 100%;
}

.about-team-panel img {
    border-radius: 12px;
}

.about-text-panel,
.about-team-panel {
    margin-bottom: 20px;
}

@media (min-width: 992px) {
    .about-text-panel,
    .about-team-panel {
        margin-bottom: 0;
    }
}