body {
    main {
        #sector {
            width: 100%;

            #sector-content {
                width: 100%;
                padding: 1.5% 1%;

                p {
                    font-size: 1.3em;

                    @media screen and (max-width: 979px) {
                        font-size: 1.2em;
                    }

                    @media screen and (max-width: 767px) {
                        font-size: 1em;
                    }
                }

                @media screen and (max-width: 767px) {
                    padding: 1% 1% 2%;
                }

                @media screen and (max-width: 480px) {
                    padding: 5% 1%;
                }
            }

            #sector-repeater {
                width: 100%;

                .sector-repeater-item {
                    width: 100%;
                    border-top: 1px solid #000000;
                    position: relative;
                    overflow: hidden;
                    transition: 1s ease;
                    background-color: var(--background-primary);

                    .primary-title,
                    .secondary-title {
                        padding: 2.25% 1%;

                        h3 {
                            font-size: 1.6em;
                        }

                        @media screen and (max-width: 979px) {
                            padding: 2.5% 1.5%;
                        }

                        @media screen and (max-width: 480px) {
                            padding: 3.5% 1.5%;

                            h3 {
                                font-size: 1.3em;
                            }
                        }
                    }

                    .primary-title {
                        h3 {
                            color: #000000;
                        }

                        &:hover {
                            cursor: pointer;
                        }
                    }

                    .secondary-title {
                        width: 100%;
                        position: absolute;
                        top: 100%;
                        left: 0;
                        transition: .5s ease;

                        h3 {
                            color: #FFFFFF;
                        }

                        &:hover {
                            cursor: pointer;
                        }
                    }

                    .sector-item-description {
                        overflow: hidden;
                        width: 100%;
                        height: 0;
                        transition: .5s ease;
                        padding: 0 1%;

                        p {
                            color: var(--paragraph-secondary);
                        }

                        .sector-description {
                            font-size: 1.2em;
                            margin-bottom: 2.5%;
                            max-width: 60%;

                            @media screen and (max-width: 979px) {
                                font-size: 1.1em;
                            }

                            @media screen and (max-width: 480px) {
                                margin-bottom: 5%;
                                max-width: 100%;
                            }
                        }

                        .sector-manager {
                            max-width: 60%;
                            margin-bottom: 1%;

                            @media screen and (max-width: 480px) {
                                margin-bottom: 2.5%;
                                max-width: 100%;
                            }
                        }

                        @media screen and (max-width: 979px) {
                            .sector-description, .sector-manager {
                                width: 50%;
                            }
                        }

                        @media screen and (max-width: 767px) {
                            .sector-description, .sector-manager {
                                width: 100%;
                            }
                        }
                    }

                    figure {
                        position: absolute;
                        top: 0;
                        right: 0;
                        width: 35%;
                        height: 0;
                        overflow: hidden;
                        transition: 1s ease;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }

                        @media screen and (max-width: 979px) {
                            width: 45%;
                        }

                        @media screen and (max-width: 767px) {
                            display: none;
                        }
                    }

                    &:hover {
                        .secondary-title {
                            top: 0;
                        }
                    }
                }

                .sector-item-open {
                    .secondary-title {
                        top: 0;
                    }

                    .sector-item-description {
                        padding: .5% 1%;
                    }

                    figure {
                        height: 100%;
                    }
                }
            }
        }
    }
}