section.image-interruptor {
    height: 500px;
    margin: 0 auto;
    max-width: var(--layout-max-width);
    width: 100%;
    padding: var(--layout-gutter);
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--box-shadow);

    img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    div.content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 28px;

        background-color: rgba(0, 0, 0, 0.6);
        color: white;

        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-end;
        gap: 14px;

        p.call-out {
            font-size: 2rem;
            font-weight: bold;
            font-style: italic;
            text-align: right;
        }

        div.ctas {
            display: flex;
            gap: 7px;
        }
        
        @media (max-width: 768px) {
            p.call-out {
                width: 100%;
                text-align: center;
                font-size: 1.2rem;
            }

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

    @media (max-width: var(--layout-max-width)) {
        border-radius: 0;
    }
}


section.article-strip {
    div.container {
        max-width: var(--layout-max-width);
        margin: 0 auto;
        padding: 0 var(--layout-gutter);

        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        gap: 28px;

        article.news-item {
            display: flex;
            flex-direction: column;
            gap: 7px;
            max-width: 400px;
            width: 100%;

            img {
                aspect-ratio: 16/9;
                background-color: lime;
            }

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

                h3 {
                    font-size: 1.8rem;
                }
            }
        }
    }
}

section.social-proof {
    max-width: var(--layout-max-width);
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--layout-gutter);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;

    div.testimonial-wrapper {
        max-width: 1000px;
        width: 100%;
        height: 100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        &.uninitialised {
            div.testimonial {
                display: block !important;
                visibility: hidden;
            }
        }

        div.testimonial {  
            &:not(.visible) {
                display: none;
            }

            div.content {
                font-size: 1.4rem;
                font-style: italic;
                text-align: center;
                position: relative;

                &::before, &::after {
                    content: '"';
                    font-size: 4rem;
                    font-style: bold;
                    position: absolute;
                }

                &::before {
                    left: -15px;
                    top: -30px;
                }

                &::after {
                    right: -15px;
                    bottom: -30px;
                    transform: rotate(180deg);
                }
            }

            div.author {
                margin-top: 14px;
                text-align: right;
                font-style: italic;
                font-size: 0.8rem;

                > * {
                    display: block;
                }

                a {
                    color: black;

                    &:hover {
                        font-weight: bold;
                    }
                }
            }
        }
    }

    div.paginator {
        display: flex;
        gap: 6px;
        align-items: center;

        button {
            border-radius: 50%;
            width: 50px;

            &.active {
                background-color: var(--colour-brand-primary);
                color: white;
            }
        }
    }
}