.tpl-sdg-overview {
    @apply pt-[8.5rem] overflow-hidden;

    .org-sdg-block {
        @apply mt-10;
        @apply mb-0;
    }

    .sdg-overview-list {
        @apply inline-flex;
        @apply mt-10;
        @apply mb-20;

        .left {
            @apply hidden;
            @apply md:block;
            min-width: 220px;
            @apply mr-16;

            .sdg-nav {
                @apply border-r-2;
                @apply border-cta;

                li {
                    @apply relative;
                    @apply opacity-50;

                    &.break {
                        @apply opacity-100;

                        > div {
                            @apply border-b-2;
                            @apply border-gray-100;
                            @apply mt-5;
                            @apply mb-5;
                            width: 175px;
                        }
                    }

                    &:hover,
                    &.active {
                        @apply opacity-100;
                    }

                    .atm-image {
                        width: 175px;
                        height: 60px;
                        overflow: hidden;
                    }

                    .sdg-12 .atm-image,
                    .sdg-16 .atm-image {
                        height: 76px;
                    }

                    &.active:after {
                        @apply absolute;
                        content: '';
                        top: 16px;
                        right: 0;
                        border-right: 24px solid #008dca;
                        border-top: 14px solid transparent;
                        border-bottom: 14px solid transparent;
                    }
                }
            }
        }

        .right {
            max-width: 850px;

            .sdg-panel {
                @apply hidden;

                &.active {
                    @apply block;
                }

                .wrapper-sdg-intro {
                    @apply grid;
                    @apply grid-cols-12;
                    @apply lg:gap-12;
                    @apply mb-8;

                    .col-left {
                        @apply block;
                        @apply col-span-8;
                        @apply mr-8;
                        @apply md:col-span-9;

                        .mol-title {
                            @apply mb-12;
                        }

                        .atm-paragraph {
                            @apply text-h5;
                        }
                    }

                    .col-right {
                        @apply text-right;
                        @apply col-span-4;
                        @apply md:col-span-3;

                        .atm-image {
                            @apply flex;
                            @apply justify-end;
                            @apply mb-8;
                        }

                        .atm-button {
                            @apply mr-0;
                        }
                    }
                }

                .sdg-relevant {
                    @apply my-6;

                    .mol-title {
                        @apply mb-12;
                    }

                    .wrapper {
                        @apply grid;
                        @apply grid-cols-1;
                        @apply md:grid-cols-2;
                        @apply gap-10;
                    }
                }
            }
        }
    }
}