main {
    section {
        width: 100%;
        padding: 10px 30px;
        h2 {
            text-align: center;
            font-family: var(--fgt);
            color: var(--mc);
            font-size: 30px;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            word-spacing: 2px;
            margin-bottom: 20px;
        }
        &#symboles {
            .content {
                display: flex;
                justify-content: space-around;
                gap: 50px;
                .kanji, .kanku {
                    width: 45%;
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                    .pic {
                        display: flex;
                        align-items: end;
                        justify-content: center;
                        img {
                            height: auto;
                            max-height: 200px;
                        }
                    }
                    .text {
                        display: flex;
                        flex-direction: column;
                        gap: 10px;
                        h3 {
                            font-family: var(--flf);
                            font-size: 30px;
                            color: var(--mc);
                            padding-top: 2.5px;
                            border-top: 2px solid var(--mc);
                            word-spacing: 2px;
                            text-align: center;
                        }
                        .contenu {
                            color: var(--dc);
                            word-spacing: 2px;
                            padding: 0 20px;
                            text-align: justify;
                        }
                    }
                }
            }
        }
        &#ceintures {
            .content {
                display: flex;
                align-items: center;
                justify-content: space-around;
                flex-wrap: wrap;
                gap: 30px;
                .box-ceinture {
                    padding: 15px 20px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-evenly;
                    border-radius: 15px;
                    width: 20%;
                    gap: 15px;
                    img {
                        width: 75px;
                        height: auto;
                    }
                    span {
                        font-size: 20px;
                        font-family: var(--flf);
                        word-spacing: 3px;
                        font-weight: 600;
                    }
                    &.blanche {
                        outline: 1.5px solid #000;
                        color: #000;
                    }
                    &.orange {
                        outline: 1.5px solid darkorange;
                        color: darkorange;
                    }
                    &.bleue {
                        outline: 1.5px solid darkblue;
                        color: darkblue;
                    }
                    &.jaune {
                        outline: 1.5px solid #fff200;
                        color: #fff200;
                    }
                    &.verte {
                        outline: 1.5px solid darkgreen;
                        color: darkgreen;
                    }
                    &.marron {
                        outline: 1.5px solid #6c0d0d;
                        color: #6c0d0d;
                    }
                    &.noire {
                        outline: 1.5px solid #000;
                        color: #000;
                    }
                }
            }
        }
        &#principes {
            .content {
                #principes-image { 
                    background: url('../../../assets/img/images/kyokushin/kyokushin/principes.jpg') no-repeat center center/cover;
                    border-radius: 20px;
                    min-height: 400px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    p {
                        width: 100%;
                        color: var(--lc);
                        font-size: 25px;
                        font-weight: 400;
                        letter-spacing: 0.8px;
                        word-spacing: 2px;
                        font-family: var(--fst);
                        text-transform: uppercase;
                        padding: 20px 50px 20px 20px;
                        text-align: right;
                    }
                }
            }
        }
        &#dojokun {
            .content {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 30px;
                .bloc {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    gap: 20px;
                    img {
                        height: 50px;
                        width: auto;
                    }
                    .sentence {
                        font-size: 22px;
                        font-family: var(--flf);
                        font-weight: 700;
                        color: var(--dc);
                    }
                }
            }
        }
        &#preceptes {
            .content {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 80%;
                margin: 0 auto;
                gap: 50px;
                .sentence {
                    padding: 0 20px 5px 20px;
                    border-bottom: 2px solid var(--dc);
                    color: var(--dc);
                    font-size: 20px;
                    font-family: var(--fst);
                    text-align: center;
                    width: 100%;
                    text-transform: uppercase;
                }
            }
        }
    }
}

@media (max-width: 768px) {
    main {
        section {
            padding: 10px 20px;
            h2 {
                font-size: 25px;
                word-spacing: 1.7px;
                margin-bottom: 15px;
            }
            &#symboles {
                .content {
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    gap: 30px;
                    .kanji, .kanku {
                        width: 90%;
                        .text {
                            h3 {
                                font-size: 25px;
                                word-spacing: 1.7px;
                            }
                            .contenu {
                                word-spacing: 1.5px;
                                padding: 0 10px;
                            }
                        }
                    }
                }
            }
            &#ceintures {
                .content {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    gap: 15px;
                    .box-ceinture {
                        width: 80%;
                        padding: 15px 20px;
                    }
                }
            }
            &#principes {
                .content {
                    #principes-image { 
                        background: url('../../../assets/img/images/kyokushin/kyokushin/principes_deux.jpg') no-repeat center center/cover;
                        border-radius: 15px;
                        p {
                            width: 100%;
                            color: var(--lc);
                            font-size: 20px;
                            word-spacing: 1.7px;
                            padding: 15px 10px;
                            text-align: center;
                        }
                    }
                }
            }
            &#dojokun {
                .content {
                    gap: 20px;
                    .bloc {
                        gap: 15px;
                        .sentence {
                            font-size: 20px;
                            font-weight: 600;
                            text-align: center;
                        }
                    }
                }
            }
            &#preceptes {
                .content {
                    width: 95%;
                    gap: 30px;
                    .sentence {
                        padding: 0 10px 5px 10px;
                        font-size: 17px;
                    }
                }
            }
        }
    }
}