.anchor{
    display:block;
    position:relative;
    visibility:hidden;
}

.content{
    display:block;
    width:100%;
    padding:40px;
    background-color: #819982;

    

    .about-section{
        display:flex;
        flex-direction:row;
        background-color: white;
        width:100%;
        min-height:200px;
        margin-bottom:40px;

        &:last-child(){
            margin-bottom:none;
        }

        .text{
            padding:20px;

            .section-title{
                font-size: 18pt;
                text-decoration: underline;     
            }
        }
        .image{
            flex-basis:500px;

            img{
                display:block;
                width:100%;
                height:100%;
                object-fit: cover;
            }
        }
        
        &:first-child{
            .image{
                img{
                    object-position: left;
                }
            }
        }
    }

    .about-section:has(:not(.image)){.text{width:100%;}}
    .about-section.right{.image{order:2;}}
    .about-section.left{.text{order:2;}}

    

    .about-timeline{
        background-image: url('/images/history_2.jpg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        /*padding:10px;*/

        .section-title{
            text-decoration: none !important;
        }

        .text{
            background-color: rgba(0,0,0,.4);
            color:white;
        }

        
        
        table{
                border-collapse: collapse;
                tr{

                    td{
                        padding:20px 5px;
                        transition: all .3s ease-in;
                    }
                    
                    td:first-child{
                        width:150px;
                        border-right:1px solid white;
                        border-bottom:none;
                    }
                    
                }

                tr.in-focus{
                    td{
                        padding:10px 5px;
                        transition: all .3s ease-in;
                    }

                    td:first-child{
                        border-bottom:1px solid white;
                    }

                    

                }
            }
    }

    
}

.text{
    container-name: history-timeline;
    container-type: inline-size;
}

@container history-timeline (max-width:500px){
    .text td{
        display:block;
        position:relative;
        padding-left:10px !important;
    }
    .text td:first-child{
        border-right:none !important;
        padding-left:5px !important;
    }
    .text td:first-child:before{
        content:"•";
        position:absolute;
        top:10px;
        left:-2px;
    }
}

@media screen and (max-width:775px){
    .about-section{
        display:block;
        position:relative;


        .image{
            position:absolute;
            z-index: 1;
            width:100% !important;
            height:100%;
            top:0px;
            left:0px;
        }
        .text{
            position:relative;
            z-index: 2;
            width:100% !important;
            margin:20px;
            background-color: rgba(255,255,255, 0.7);
            color:black;
        }
    }
}







/* :root{
    --border-color:black;
}
.content{
    display:block;
    width:100%;
    padding:40px;

    .content-inner {
        position:relative;
        width:100%;
        
        border: 1px solid var(--border-color);
        padding:10px;
        text-align: center;

        .content-text{

            .content-section{
                .content-title{
                    display:block;
                    width:100%;
                    text-align:center;
                

                    .title{
                        display:block;
                        width:100%;
                        font-family: 'Edwardian Script' !important;
                        font-size: 50px;
                    }

                    .line{
                        background-color: var(--border-color);
                        mask:url("/images/underline.svg") no-repeat center / contain;
                        width:100px;
                        height:30px;
                        margin:auto;
                    }
                    
                }

                .content-body{
                    display:flex;
                    flex-direction: row;
                    align-items: center;
                    width:100%;


                    
                    .text{
                        width:40%;
                        text-align: justify;
                        padding: 10px 10px 10px 10px;
                    }
                    .image{
                        width:60%;
                        padding: 20px 20px 20px 20px; 


                    }

                    .image.second{
                        filter: grayscale(1) blur(0.5px) contrast(1.3);
                    }

                    img{
                        width:100%;
                        border: 1px solid black;
                        padding: 5px;
                        border-radius: 50%;
                    }
                    

                    

                }
            }


            .content-section.right{
                
                .content-body .text{
                    order:1;
                }
                .content-body .image{
                    order:2;
                }
            }



            .content-section.left{
                
                .content-body .text{
                    order:2;
                }
                .content-body .image{
                    order:1;
                }
            }



        }
        
        
        .corner {
            width: 0.5rem;
            height: 0.5rem;
            border: 1px solid var(--border-color);
            position: absolute;

            &::after,
            &::before {
                content: "";
                position: absolute;
            }

            &::after {
                width: 2rem;
                height: calc(1rem - 1px);
            }

            &::before {
                width: calc(1rem - 1px);
                height: 2rem;
            }

            &.left {
                left: -0.5rem;

                &::after {
                    left: calc(-2px + 1rem);
                    border-left: 1px solid var(--border-color);
                }

                &::before {
                    left: -1px;
                    border-left: 1px solid var(--border-color);
                }
            }

            &.right {
                right: -0.5rem;

                &::after {
                    right: calc(-2px + 1rem);
                    border-right: 1px solid var(--border-color);
                }

                &::before {
                    right: -1px;
                    border-right: 1px solid var(--border-color);
                }
            }

            &.top {
                top: -0.5rem;

                &::after {
                    top: -1px;
                    border-top: 1px solid var(--border-color);
                }

                &::before {
                    top: calc(-2px + 1rem);
                    border-top: 1px solid var(--border-color);
                }
            }

            &.bottom {
                bottom: -0.5rem;

                &::after {
                    bottom: -1px;
                    border-bottom: 1px solid var(--border-color);
                }

                &::before {
                    bottom: calc(-2px + 1rem);
                    border-bottom: 1px solid var(--border-color);
                }
            }
        }
    }
}
 */
7878