/* @font-face {
    font-display: swap;
    font-family: "Melts Script Rough Sanscript One";
    src:
        url("Fonts/meltsscriptrough-sanscriptone-webfont.woff2") format("woff2"),
        url("Fonts/meltsscriptrough-sanscriptone-webfont.woff") format("woff");
    font-style: normal;
    font-weight: normal;
} */

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


#x_moments {
    align-items: center;
    display: flex;
    flex-direction: column;
    font-size: clamp(12px, 2vw, 16px);
}

#x_moments > .main-porthole {
    background-image: url("../images/pre-page/porthole-big.webp");
    background-repeat: no-repeat;
    background-size: cover;
    clip-path: circle(50% at 50% 50%);
    height: 26em;
    width: 26em;
}

#x_moments > .main-porthole > video {
    clip-path: circle(50% at 50% 50%);
    height: calc(26em - 10%);
    margin: 5%;
    width: calc(26em - 10%);
}

#x_moments > .philosophies-header {
    font-size: 1.5em;
    color: #fff;
    margin: 1.5em 0;
}

#x_moments > .philosophies {
    display: grid;
    gap: 2em;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto auto;
    justify-content: center;
}

#x_moments > .philosophies > .philosophy {
    -webkit-tap-highlight-color: transparent;
    background-image: url("../images/pre-page/porthole.webp");
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    height: 8em;
    position: relative;
    transition: transform 1000ms ease;
    width: 8em;
}

#x_moments > .philosophies > .philosophy::after {
    align-items: center;
    background-image: url("../images/pre-page/porthole-lid.webp");
    background-repeat: no-repeat;
    background-size: cover;
    color: rgba(255, 255, 255, 0.5);
    content: "?";
    display: flex;
    font-size: 3em;
    font-weight: bold;
    height: calc(6.7em / 3);
    justify-content: center;
    left: calc(1em / 3);
    padding-top: calc(0.7em / 3);
    position: absolute;
    top: calc(0.3em / 3);
    transform-origin: top;
    transition:
        transform 1000ms ease,
        color 500ms ease;
    width: calc(6em / 3);
}

#x_moments > .philosophies > .philosophy.open {
    transform: scale(2);
    z-index: 1;
}

#x_moments > .philosophies > .philosophy.open::after {
    color: transparent;
    transform: rotateX(180deg);
}

#x_moments > .philosophies > .philosophy:nth-child(1) {
    transform-origin: 0 50%;
    grid-column: 1 / span 2;
}

#x_moments > .philosophies > .philosophy:nth-child(2) {
    grid-column: 3 / span 2;
}

#x_moments > .philosophies > .philosophy:nth-child(3) {
    transform-origin: 100% 50%;
    grid-column: 5 / span 2;
}

#x_moments > .philosophies > .philosophy:nth-child(4) {
    grid-column: 2 / span 2;
    grid-row: 2;
}

#x_moments > .philosophies > .philosophy:nth-child(5) {
    grid-column: 4 / span 2;
    grid-row: 2;
}

@media (min-width: 1200px) {
    #x_moments > .philosophies {
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: auto;
    }
    #x_moments > .philosophies > .philosophy:nth-child(1) {
        transform-origin: 50% 50%;
        grid-column: 1;
    }

    #x_moments > .philosophies > .philosophy:nth-child(2) {
        grid-column: 2;
    }

    #x_moments > .philosophies > .philosophy:nth-child(3) {
        transform-origin: 50% 50%;
        grid-column: 3;
    }

    #x_moments > .philosophies > .philosophy:nth-child(4) {
        grid-column: 4;
        grid-row: 1;
    }

    #x_moments > .philosophies > .philosophy:nth-child(5) {
        grid-column: 5;
        grid-row: 1;
    }
}

#x_moments > .philosophies > .philosophy > img {
    clip-path: circle(50% at 50% 50%);
    height: calc(8em - 30%);
    margin: 15%;
    width: calc(8em - 30%);
}