body {
    font-family: 'Katibeh', cursive;
}

.landing-animation {
    width: 100%;
    height: 100vh;
    
    background: url(/assets/media/index/looped-animation.gif) no-repeat center center / cover;

    /* Centre header */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}



.landing-welcome {
    position: relative;
    width: 100%;
    height: 100vh;

    /* Centre header */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* Background image */
    background-image: url('/assets/media/index/squiggle1.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    padding: 5vw;
}

.landing-welcome>img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.landing-content {
    /* Temporary top-down gradient to imitate final BG image */
    background-color: var(--color-front);
}

.landing-letter {
    padding-left: 10vw;
    padding-right: 10vw;
}

.landing-letter-content {
    background-color: white;
    /* Replace with texture */
    color: #9A1C2B;
    padding: 5vw;
    font-size: 2rem;
    text-align: center;
    font-family: 'Karla', sans-serif;
}

.landing-letter-content>h1,
h2,
h3,
h4,
p {
    margin: 0;
}

.landing-letter-content>h1 {
    color: #E27683;
    font-size: 8rem;
    font-family: 'Katibeh', cursive;
    padding-bottom: 3rem;
}

.landing-letter-content>p {
    padding-bottom: 3rem;
}

.landing-postcards {
    /* padding: 5vw; */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* gap: 5vw; */

    padding: 5vw;
    gap: 2vw;
}

.landing-postcard-stamp {
    padding-right: 24.1414141%;
}


.landing-postcard > p {
    text-align: justify;
}

.landing-postcard {
    width: 100%;
    /* Replace with texture */
    padding: calc(1.39% + 3vh) calc(3.125% + 3vw);
    font-size: 1.5rem;
    font-family: 'Karla', sans-serif;
    margin-bottom: 5vw;

    /* Force 16:9 aspect ratio */
    aspect-ratio: 16/9;

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

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

.postcard-sports {
    background-image: url('/assets/media/index/sports.png');
}

.postcard-news {
    background-image: url('/assets/media/index/news.png');
}

.postcard-biz {
    background-image: url('/assets/media/index/biz.png');
}

.postcard-comment {
    background-image: url('/assets/media/index/comment.png');
}

.postcard-arts {
    background-image: url('/assets/media/index/arts.png');
}

.postcard-science {
    background-image: url('/assets/media/index/science.png');
}

.postcard-copy {
    background-image: url('/assets/media/index/copy.png');
}

.postcard-photo {
    background-image: url('/assets/media/index/photo.png');
}

.postcard-illo {
    background-image: url('/assets/media/index/illo.png');
}

.postcard-features {
    background-image: url('/assets/media/index/features.png');
}

.postcard-video {
    background-image: url('/assets/media/index/video.png');
}

.landing-separator {
    height: 10vh;
}

.landing-section-1 a {
    color: #01CBD8 !important;
}

.landing-section-1  {
    background: #02555A;
}

.landing-section-2 a {
    color: #FFCB69 !important;
}

.landing-section-2 {
    background: #BC5965;
}

.landing-content {
    background-image: url("/assets/media/index/group_squiggle.png");
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.landing-section-3 a {
    color: #FFCB69 !important;
}

.landing-section-3 {
    background: #d16648;
}

.landing-section-4 a {
    color: #D8DCB7 !important;
}

.landing-section-4 {
    background: #7b7d6b;
}


.landing-photos h1 {
    font-size: 1.85rem;
}

.landing-photos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5vw;
    padding: 5vw;
    display: grid;
    align-items: stretch;
    /* margin-bottom: calc(1 * var(--global-padding) / 2); */
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
}

.landing-photo {
    min-height: 20vh;
    border-top: 1rem solid white;
    border-bottom: 3rem solid white;
    border-left: 1rem solid white;
    border-right: 1rem solid white;
    font-size: 2rem;
    padding: 2rem;
    padding-bottom: calc(2rem + 2rem);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.landing-photo-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: white;
    padding: 2rem;
    padding-bottom: calc(2rem + 2rem);
    font-size: 2rem;
}

.landing-photo>h1,
h2,
h3,
h4,
p {
    margin: 0;
}

.landing-photo-section>h1,
h2,
h3,
h4,
p {
    margin: 0;
}

.landing-photo > a, .landing-photo-section > a {
    color: black;
    text-decoration: none;
}

.landing-photo > a:active, .landing-photo-section > a:active {
    color: black;
}

@media screen and (max-width: 768px) {
    .landing-postcards {
        grid-template-columns: repeat(1, 1fr);
    }

    .landing-postcard {
        font-size: 0.8rem;
        padding: calc(1.39% + 1vh) calc(3.125% + 3vw);
    }

    .landing-postcard-stamp {
        padding-right: 21.1414141%;
    }

    p.smaller {
        font-size: 0.7rem;
    }

    .landing-photos {
        /* Force photos to show in one column */
        grid-template-columns: repeat(1, 1fr);
        grid-auto-flow: row;
    }

    .landing-letter-content {
        font-size: 1rem;
    }

    .landing-letter-content>h1 {
        font-size: 4rem;
    }
}