.tpl-initiative-page {
    @apply pt-[8.5rem] overflow-hidden;

    .initiative-page-content {
        @apply mb-24;
        @apply relative;
        @apply grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: 280px 100px minmax(0, 1fr);

        @screen md {
            grid-template-columns: 0.4fr minmax(0, 1fr) minmax(0, 1fr) 0.4fr;
            grid-template-rows: 210px 100px minmax(0, 1fr);
        }

        @screen lg {
            grid-template-columns: 0.6fr minmax(0, 1fr) minmax(0, 1fr) 0.4fr;
            grid-template-rows: 300px 160px minmax(0, 1fr);
        }

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

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

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

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

        .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;
            }

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

        .content {
            grid-area: 2 / 1 / 4 / 3;
            @apply mx-4;
            @apply md:mx-0;
            @apply bg-white;
            @apply p-12;
            @apply block;

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

            .mol-tag-bubble {
                @apply text-center;
            }

            .mol-title {
                @apply md:text-center;
                @apply mb-10;
            }

            .org-sdg-block {
                @apply mt-8;
                @apply lg:hidden;

                .mol-title {
                    @apply mb-8;
                    @apply text-left;
                }
            }
        }

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

            .org-sdg-block {
                @apply pt-8 pr-8 max-w-[250px];
                @apply bg-white;

                .mol-title {
                    @apply mb-8;
                    @apply text-left;
                }
            }
        }
    }

    .initiative-relevant {
        @apply mb-20;

        .mol-title {
            @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;
        }
    }
}