main {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   h1 {
    font-size: 30px;
    text-transform: uppercase;
    color: var(--mc);
    font-family: var(--fa);
   }
    section {
        width: 100%;
        font-family: var(--fa);
        .header-section {
            width: 100%;
            text-align: center;
            padding: 10px 0;
            font-size: 40px;
            font-family: var(--fm);
            color: var(--lc);
            background: var(--mc);
            text-transform: uppercase;
            font-weight: bold;
            margin: 20px 0 10px 0;
        }
        .content-section {
            width: 90%;
            margin: 0 auto;
        }
        &#club, &#shihan, &#dan {
            .content-section {
                display: flex;
                flex-direction: column;
                gap: 10px;
                .section {
                    display: flex;
                    gap: 10px;
                    &:nth-child(odd) {
                        flex-direction: row;
                    }
                    &:nth-child(even) {
                        flex-direction: row-reverse
                    }
                    img {
                        height: 100%;
                        max-height: 250px;
                        width: auto;
                        max-width: 400px;
                        outline: 1px solid rgb(245, 245, 245);
                    }
                    .text-section {
                        display: flex;
                        flex-direction: column;
                        gap: 10px;
                        border-top: 5px solid var(--mc);
                        text-align: justify;
                        h2 {
                            color: var(--mc);
                            font-family: var(--fm);
                            text-transform: uppercase;
                            font-size: 27.5px;
                        }
                        i, strong {
                            color: var(--mc);
                        }
                    }
                    .author {
                        text-align: right;
                    }
                }
            }
        }
    }
}

@media (max-width: 768px) {
    main {
        h1 {
            font-size: 22px;
            text-align: center;
        }
        section {
            .header-section {
                font-size: 30px;
            }
            &#club, &#shihan, &#dan {
                .content-section {
                    gap: 10px;
                    .section {
                        gap: 10px;
                        flex-direction: column!important;
                        img {
                            max-height: none;
                        }
                        .text-section {
                            border-top: 4px solid var(--mc);
                            h2 {
                                text-align: center;
                            }
                        }
                    }
                }
            }
        }
    }
}