.bedrock-combined {

    .introduction {

        .content-group {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
            align-items: stretch;
            justify-items: stretch;

            @media (width > 900px) {
                grid-template-columns: 1fr 1fr 1fr;
                aspect-ratio: 16/9;
            }

            .column {
                position: relative;
                overflow: clip;


                .bg {
                    display: block;
                    width: 100%;
                    aspect-ratio: 16/9;

                    object-fit: cover;
                    object-position: 50% 50%;
                    
                    filter: grayscale(100%) brightness(80%);
                    transition: filter 300ms ease-in;
                }
                h2 {
                    position: static;
                    margin-block: 0;
                    margin-inline: 0;

                    padding-block: 1rem;

                    font-size: 1rem;
                    text-wrap: normal;

                    :any-link {
                        position: static;

                        &::after {
                            position: absolute;
                            inset: 0;
                            content: "";
                            display: block;
                        }
                        text-decoration: none;
                    }
                    :any-link:hover,
                    :any-link:focus-visible,
                    :any-link:active {
                        text-decoration: underline;
                    }
                }

                &:has(:any-link:hover) {
                    
                    .bg {
                        filter: grayscale(0) brightness(100%);
                    }
                }

                @media (width > 900px) {
                    .bg {
                        aspect-ratio: 2/3;
                    }
                }
            }
        }
    }
}