#glomac {
    margin-bottom: 0;
    
    #sec-title {
        position: relative;
        height: 480px;
        background-color: #FFCD9A;
        
        .background-img {
            height: 100%;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .title-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;

            &.with-overlay {
                backdrop-filter: blur(2px);
                background: rgba(0, 0, 0, 0.2);
            }

            .title-text {
                height: 100%;
                flex: 1;
                /* display: flex;
                flex-direction: column; */
                padding: 40px;
                color: white;

                h1 {
                    text-transform: uppercase;
                    font-family: 'Bayon', sans-serif;
                    font-size: 50px;
                }

                .subtitle-container {
                    margin-top: 10px;
                    padding: 8px;
                    /* background: rgba(0, 0, 0, 1); */
                    width: fit-content;
                    background: linear-gradient(to right, #FE5000, #FFC175);

                    h2 {
                        text-transform: uppercase;
                        font-size: 18px;
                    }
                }
            }
        }
    }

    #youtube-wrapper {
        width: 75%;
        max-width: 100dvh;
        margin: 0 auto;
        margin-top: 80px;
        margin-bottom: 60px;

        & .youtube-container {
            position: relative;
            overflow: hidden;
            height: 0;
            padding-bottom: 56.25%;
            border-radius: 5px;

            & iframe {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                max-width: 100%;
            }
        }
    }

    #sec-01 {
        max-width: 900px;
        margin: 0 auto;
        margin-top: 40px;
        padding: 0 20px;

        & h2 {
            font-size: 20px;
            border-left: 15px solid #F79428;
            padding: 15px 0;
            padding-left: 20px;
            margin-bottom: 40px;
            font-family: 'Hiragino Kaku Gothic Pro W6', sans-serif;
        }

        & p {
            margin: 0 20px;
            font-size: 16px;
            line-height: 1.75;
        }
    }

    #sec-02 {
        background: linear-gradient(to bottom, white 200px, #FFDCB5 200px);
        padding-bottom: 40px;

        .content-container {
            max-width: 900px;
            margin: 0 auto;
            margin-top: 60px;
            padding: 0 20px;

            & h2 {
                font-size: 20px;
                border-left: 15px solid #F79428;
                padding: 15px 0;
                padding-left: 20px;
                margin-bottom: 40px;
                font-family: 'Hiragino Kaku Gothic Pro W6', sans-serif;
            }

            /* Table structure (desktop) */
            table.point-containers {
                margin: 0 20px;
                border: 1px solid #F79428;
                border-collapse: collapse;
                width: calc(100% - 40px);
                background-color: white;
                display: table;

                @media (max-width: 768px) {
                    display: none;
                }

                tbody {
                    .point-row {
                        display: table-row;

                        .point-container {
                            display: table-cell;
                            border-right: 1px solid #F79428;
                            padding: 0 25px;
                            vertical-align: top;
                            background-color: white;

                            &:last-child {
                                border-right: none;
                            }
                        }
                    }

                    .index-row {
                        .point-container.index {
                            display: table-cell;
                            padding-top: 30px;
                            padding-bottom: 30px;

                            .index-content {
                                display: flex;
                                flex-direction: column;
                                align-items: flex-start;
                                justify-content: center;
                                gap: 5px;
                            }

                            & a {
                                font-size: 18px;
                                color: #F79428;
                                font-family: 'Bayon', sans-serif;
                            }

                            & span {
                                font-size: 32px;
                                color: #F79428;
                                font-family: 'Bayon', sans-serif;
                            }
                        }
                    }

                    .header-row {
                        .point-container.content {
                            padding-bottom: 30px;

                            h3 {
                                margin-bottom: 0;
                                font-size: 16px;
                                font-family: 'Hiragino Kaku Gothic Pro W6', sans-serif;
                                text-decoration: underline;
                                line-height: 1.75;
                                text-underline-offset: 5px;
                            }
                        }
                    }

                    .text-row {
                        .point-container.content {
                            padding-bottom: 60px;

                            p {
                                font-size: 14px;
                                line-height: 2;
                            }
                        }
                    }
                }
            }

            /* Div structure (mobile) */
            div.point-containers-mobile {
                margin: 0 20px;
                border: 1px solid #F79428;
                border-bottom: none;
                display: none;

                @media (max-width: 768px) {
                    display: flex;
                    flex-direction: column;
                    flex-wrap: wrap;
                }

                .point-container {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    border-right: none;
                    border-bottom: 1px solid #F79428;
                    padding: 30px 25px;
                    background-color: white;

                    .index {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        width: fit-content;
                        gap: 5px;
                        color: #F79428;
                        font-family: 'Bayon', sans-serif;
                        margin-bottom: 20px;

                        & a {
                            font-size: 18px;
                        }

                        & span {
                            font-size: 32px;
                        }
                    }

                    & h3 {
                        margin-bottom: 40px;
                        font-size: 16px;
                        font-family: 'Hiragino Kaku Gothic Pro W6', sans-serif;
                        text-decoration: underline;
                        line-height: 1.75;
                        text-underline-offset: 5px;
                    }

                    & p {
                        font-size: 14px;
                        line-height: 2;
                    }
                }
            }
        }
    }
}

@media (max-width: 768px) {
    #glomac {
        #sec-title {
          height: 320px;
    
          .title-container .title-text {
            padding: 24px 20px;
    
            h1 {
              font-size: 28px;
            }
    
            .subtitle-container {
              margin-top: 8px;
              padding: 6px;
    
              h2 {
                font-size: 14px;
              }
            }
          }
        }
        
        .image-container {
            margin: 20px auto;
            padding: 0 15px;
        }
    }
}