h2 {
    font-size: 7rem;
    margin-top: 0;
    transform: none;
    margin-bottom: 0;
}

.sub-header {
    font-size: 2rem;
    margin: 0;
}

.cont {
    z-index: 2;
    position: relative;
}

.container {
    margin-bottom: 20px;
}

.container.hidden {
    display: none;
}

img {
    cursor: pointer;
}

.container1 {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    --grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    gap: 20px 20px;
    grid-template-areas:
          "C1_L1 C1_L1 C1_L1 C1_L1 C1_V1 C1_V1"
          "C1_L1 C1_L1 C1_L1 C1_L1 C1_V1 C1_V1"
          "C1_L1 C1_L1 C1_L1 C1_L1 C1_V1 C1_V1"
          "C1_N1 C1_N1 C1_N1 C1_N2 C1_N2 C1_N2"
          "C1_N1 C1_N1 C1_N1 C1_N2 C1_N2 C1_N2";
}

.C1_N1 { grid-area: C1_N1; }
.C1_N2 { grid-area: C1_N2; }
.C1_L1 { grid-area: C1_L1; }
.C1_V1 { grid-area: C1_V1; }

.container2 {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    --grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    gap: 20px 20px;
    grid-template-areas:
          "C2_S1 C2_S1 C2_S2 C2_S2 C2_S3 C2_S3"
          "C2_S1 C2_S1 C2_S2 C2_S2 C2_S3 C2_S3"
          "C2_V1 C2_V1 C2_L1 C2_L1 C2_L1 C2_L1"
          "C2_V1 C2_V1 C2_L1 C2_L1 C2_L1 C2_L1"
          "C2_V1 C2_V1 C2_L1 C2_L1 C2_L1 C2_L1";
}

.C2_S1 { grid-area: C2_S1; }
.C2_V1 { grid-area: C2_V1; }
.C2_S2 { grid-area: C2_S2; }
.C2_S3 { grid-area: C2_S3; }
.C2_L1 { grid-area: C2_L1; }

.container1 a, .container2 a, .container1 a div img, .container2 a div img, .container1 a div, .container2 a div {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

@media screen and (max-width: 800px) {
    h2 {
        font-size: 4.5rem;
    }
    .container1 {
        display: grid;
        grid-auto-columns: 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        --grid-template-rows: auto 1fr 1fr 1fr 1fr 1fr 1fr;
        gap: 5px 5px;
        grid-template-areas:
            "C1_L1 C1_L1 C1_L1 C1_L1 C1_L1"
            "C1_V1 C1_V1 C1_N2 C1_N2 C1_N2"
            "C1_V1 C1_V1 C1_N2 C1_N2 C1_N2"
            "C1_V1 C1_V1 C1_N2 C1_N2 C1_N2"
            "C1_N1 C1_N1 C1_N1 C1_N1 C1_N1"
            "C1_N1 C1_N1 C1_N1 C1_N1 C1_N1"
            "C1_N1 C1_N1 C1_N1 C1_N1 C1_N1";
    }

    .container2 {
        display: grid;
        grid-auto-columns: 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        --grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr auto;
        gap: 5px 5px;
        grid-template-areas:
              "C2_S1 C2_S1 C2_S2 C2_S2"
              "C2_S1 C2_S1 C2_S2 C2_S2"
              "C2_S1 C2_S1 C2_S2 C2_S2"
              "C2_S3 C2_S3 C2_V1 C2_V1"
              "C2_S3 C2_S3 C2_V1 C2_V1"
              "C2_S3 C2_S3 C2_V1 C2_V1"
              "C2_L1 C2_L1 C2_L1 C2_L1";
    }

    .container {
        margin-bottom: 5px;
    }
}

iframe {
    min-height: 250px;
    border-bottom: solid var(--color-highlight) 1px;

    transition: all .5s ease-in-out;
}

#momento.open iframe {
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    height: 100vh;
    width: 110vw;
    margin: 0;
    padding: 0;
    border: none;
}

#panorama-button-close {
    position: fixed;
    top: 65px;
    right: 20px;
    z-index: 11000;

    font-size: 2rem;
    display: none;

    color: var(--color-white);
    transition: color .4s ease-in-out;
}

#momento.open #panorama-button-close {
    display: initial;
}

#panorama-button-close:hover {
    color: var(--color-highlight);
}