section.articles {
    display: flex;
    gap: calc(var(--layout-gutter) * 2);
    align-items: stretch;
    margin-bottom: 1px;

    div.text {
        max-width: 300px;
        width: 100%;

        p {
            margin-top: var(--layout-gutter);
        }

        a.button {
            margin-top: var(--layout-gutter);
        }
    }

    div.cards {
        display: flex;
        gap: var(--layout-gutter);
        align-items: stretch;
        justify-content: flex-start;
        flex-wrap: wrap;
        width: 100%;
    }

    @media (max-width: 768px) {
        flex-direction: column;

        div.text {
            max-width: 100vw;

            a.button {
                width: 100%;
            }
        }

        div.cards {
            width: 100%;
            flex-direction: column;
        }
    }
}

article.news-item {
    background-color: var(--colour-white);
    padding: var(--layout-gutter);
    box-shadow: var(--box-shadow);
    max-width: 250px;
    width: 100%;

    @media (max-width: 768px) {
        max-width: 100%;
    }

    div.content {
        display: flex;
        flex-direction: column;
        height: 100%;
        gap: 4px;

        p {
            flex: 1;
            height: 100%;
            font-size: 0.9rem;

            &.datetime {
                font-size: 0.8rem;
                text-align: right;
            }
        }
    }
}

section.partnerships {
    margin-top: calc(var(--layout-gutter) * 4);

    div.container {
        display: flex;
        flex-wrap: wrap;
        gap: calc(var(--layout-gutter) * 2);
        justify-content: space-evenly;
        align-items: center;

        div.logo {
            height: 90px;

            img {
                margin: 0 auto;
                height: 100%;
                border-radius: 0;
            }

            &.dark-bg {
                background-color: var(--colour-brand-primary);
            }
        }
    }
}

section.instagram {
    div.container {
        display: flex;
        gap: calc(var(--layout-gutter) * 2);
        align-items: stretch;

        @media (max-width: 800px) {
            flex-direction: column;
            justify-content: center;
            align-items: center;

            img {
            }
        }

        img {
            max-width: 300px;
            width: 100%;
            max-height: 600px;
        }

        > div {
            display: flex;
            flex-direction: column;
            gap: var(--layout-gutter);

            a.from {
                display: flex;
                gap: var(--layout-gutter);
                align-items: center;
                padding: calc(var(--layout-gutter) / 2);
                box-shadow: var(--box-shadow);
                background-color: white;
                width: fit-content;
                text-decoration: none;
                color: black;

                svg {
                    width: 40px;
                    height: 40px;
                }

                p.handle {
                    font-family: monospace;
                    text-decoration: underline;
                }

                &:hover {
                    background-color: var(--colour-brand-primary);
                    color: white;

                    svg {
                        fill: white;
                    }
                }
            }

            div.links {
                display: flex;
                flex-wrap: wrap;
                gap: calc(var(--layout-gutter) / 2);
            }

            a.button {
                text-decoration: none;

                display: flex;
                align-items: center;
                gap: calc(var(--layout-gutter) / 2);

                svg {
                    width: 20px;
                    height: 20px;
                }

                &.primary {
                    svg {
                        fill: white;
                    }
                }
            }
        }
    }
}