.mission-block {
    padding: var(--space-80) var(--space-36);
    background: var(--background-02);

    .inner-container {
        max-width: 1296px;
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        gap: var(--space-64);

        .title-image {
            display: flex;
            flex-direction: column;
            max-width: 854px;
            margin: 0 auto;
            gap: var(--space-48);

            .title-description {
                display: flex;
                flex-direction: column;
                gap: var(--space-32);

                .title {
                    color: var(--text-primary);
                    text-align: center;
                    font-family: BOG, sans-serif;
                    font-size: 32px;
                    font-style: normal;
                    font-weight: 700;
                    line-height: 48px;
                }

                .description {
                    p {
                        color: var(--text-primary);
                        text-align: center;
                        font-family: BOG, sans-serif;
                        font-size: 18px;
                        font-style: normal;
                        font-weight: 500;
                        line-height: 30px;
                    }
                }
            }

            .image-container {
                border-radius: var(--border-radius-20);
                overflow: hidden;

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

        .missions-container {
            display: flex;
            flex-direction: column;
            gap: var(--space-48);

            .missions {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: var(--space-32);

                .mission {
                    display: flex;
                    flex-direction: column;
                    gap: var(--space-16);

                    .icon-title {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        gap: var(--space-16);

                        .icon-container {
                            padding: var(--space-16);
                            border-radius: var(--border-radius-circle);
                            overflow: hidden;
                            background-color: var(--layer-alpha-pressed-01);
                            width: fit-content;
                            margin: 0 auto;

                            img {
                                width: 16px;
                                height: 16px;
                            }
                        }

                        .mission-title {
                            color: var(--text-primary);
                            text-align: center;
                            font-family: BOG, sans-serif;
                            font-size: 18px;
                            font-style: normal;
                            font-weight: 700;
                            line-height: 30px;
                        }
                    }

                    .mission-description {
                        p {
                            color: var(--text-primary);
                            text-align: center;
                            font-family: BOG, sans-serif;
                            font-size: 16px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 24px;
                        }
                    }
                }
            }

            .button-container {
                .button {
                    display: flex;
                    padding: var(--space-20) var(--space-32);
                    justify-content: center;
                    align-items: center;
                    border-radius: var(--border-radius-8);
                    background: var(--button-primary);
                    width: fit-content;
                    margin: 0 auto;

                    color: var(--text-white);
                    font-family: BOG Headline, sans-serif;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 18px;
                    text-transform: uppercase;
                }
            }
        }
    }
}

@media (max-width: 1024px) {
    .mission-block .inner-container {
        .title-image {
            max-width: 708px;

            .title-description {
                max-width: 624px;
                margin: 0 auto;
            }
        }
    }
}

@media (max-width: 768px) {
    .mission-block {
        padding: var(--space-80) var(--space-28);

        .inner-container {
            .title-image {
                max-width: 712px;

                .title-description {
                    max-width: 712px;
                }

                .image-container {
                    width: fit-content;
                    margin: 0 auto;

                    img {
                        width: 528px;
                        height: 396px;
                    }
                }
            }

            .missions-container {
                .missions {
                    grid-template-columns: 1fr;
                    gap: var(--space-48);
                }
            }
        }
    }
}

@media (max-width: 600px) {
    .mission-block {
        padding: var(--space-48) var(--space-24);

        .inner-container {
            gap: var(--space-32);

            .title-image {
                gap: var(--space-32);

                .title-description {
                    gap: var(--space-24);

                    .title {
                        font-size: 22px;
                        line-height: 34px;
                    }

                    .description {
                        p {
                            font-size: 16px;
                            font-weight: 400;
                            line-height: 24px;
                        }
                    }
                }

                .image-container {
                    img {
                        width: 100%;
                        height: 246px;
                    }
                }
            }
        }
    }
}