.tpl-blog-page {
    @apply pt-6 overflow-hidden;

    .blog-page-content {
        @apply mb-24;
        @apply relative;
        @apply md:grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* See comment on top */
        grid-template-rows: 380px minmax(0, 1fr); /* See comment on top */

        @screen md {
            grid-template-columns: 0.8fr minmax(0, 1fr) minmax(0, 1fr) 0.8fr; /* See comment on top */
        }

        @screen lg {
            grid-template-columns: 0.8fr minmax(0, 1fr) minmax(0, 1fr) 0.8fr; /* See comment on top */
            grid-template-rows: 600px minmax(0, 1fr); /* See comment on top */
        }

        .vebego-container {
            @apply p-0;
        }

        .image {
            grid-area: 1 / 1 / 2 / 3;
            @apply md:overflow-hidden;

            @screen md {
                grid-area: 1 / 1 / 2 / 5;
            }

            @apply w-auto;
            @apply h-full;

            .atm-image {
                @apply h-full;
            }

            img {
                height: 380px;
                @apply w-full;
                @apply md:h-full;
                object-fit: cover;
            }

            .ambient {
                @apply relative;
            }
        }

        .social {
            grid-area: 2 / 2 / 4 / 3;
            @apply absolute;
            @apply md:relative;
            @apply top-0;
            @apply md:top-auto;
            @apply right-8;
            @apply md:right-auto;
            @apply mt-12;
            @apply text-center;

            @screen md {
                grid-area: 3 / 4 / 4 / 5;
            }

            .mol-social-media {
                @apply hidden;
                @apply md:inline-flex;

                li a {
                    @apply bg-black;

                    .atm-icon {
                        @apply text-white;
                    }
                }
            }

            .xs {
                @apply block;
                @apply md:hidden;
            }
        }

        .content {
            grid-area: 3 / 1 / 4 / 3;
            @apply mx-4;
            @apply md:mx-0;
            @apply bg-white;
            @apply pt-9 pb-1;
            @apply block;

            @screen md {
                grid-area: 3 / 2 / 4 / 4;
            }

            h1 {
                @apply mb-6 md:mb-10 text-secondary-col-1;
            }

            .blog-intro {
                @apply mb-12;
                p {
                    @apply text-primary;
                }
            }

            .content-block {
                @apply mb-8;
            }

            .org-video-block .atm-heading {
                @apply mb-0;
            }
        }

        .contact {
            @apply hidden;
            @apply lg:block;
            grid-area: 2 / 1 / 4 / 2;
        }
    }

    .blog-relevant {
        @apply mb-20;

        .atm-heading {
            @apply mb-10;
        }

        .wrapper {
            @apply grid;
            @apply gap-8;
            @apply grid-cols-1;
            @apply md:gap-16;
            @apply md:grid-cols-2;
            @apply lg:grid-cols-3;
        }
    }
}