.page-template-tpl-advisor-board-event{
    .banner-info{
        @media (min-width: 1440px){
            min-height: 566px;
        }
    }
    .intro{
        background-color: #FFF;
        padding: 36px 0px;
        @media (min-width: 1024px){
            padding: 64px 0px;
        }
    }
    .intro-wrap{
        margin: 0 auto;
        text-align: center;
        h1{
            color: #0C233F;
            font-size: 42px;
            font-style: normal;
            font-weight: 700;
        }
        p{
            color: #666;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            strong{
                color: #007CBC;
            }
        }
        @media (min-width: 1024px){
            width: 752px;
        }
    }
    .agenda{
        background-color: #0C233F;
        padding: 36px 0px;
        @media (min-width: 1024px){
            padding: 64px 0px;
        }
        h3{
            color: #FFF;
            text-align: center;
            font-size: 35px;
            font-style: normal;
            font-weight: 700;
        }
    }
    .agenda-items{
        margin-top: 48px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 24px;
        color: var(--grey-body, #666);
        text-align: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        @media (min-width: 576px){
            
        }
        @media (min-width: 768px ){
            
        }
        strong{
            color: #0C233F;
            font-size: 21px;
            font-style: normal;
            font-weight: 700;
        }
        .day{
            background-color: #fff;
            padding: 12px;
            width: 100%;
            @media (min-width: 1024px){
                padding: 24px;
                width: calc(33% - 16px);
            }
            .date{
                background-color: #0C233F;
                padding: 12px;
                display: block;
                text-align: center;
                color: #fff;
                font-weight: 700;
                margin-bottom: 24px;
                span{
                    font-size: 60px;
                    display: block;
                    line-height: 1em;
                }
            }
        }
    }
    .hosts{
        background-color: #F7F7F8;
        padding: 36px 0px;
        @media (min-width: 1024px){
            padding: 64px 0px;
        }
        text-align: center;
        h3{
            color: #0C233F;
            font-size: 35px;
            font-style: normal;
            font-weight: 700;
        }
        .hosts-items{
            margin-top: 48px;
            display: grid;
            grid: auto / repeat(1, 1fr);
            gap: 24px;
            @media (min-width: 576px ){
                grid: auto / repeat(3, 1fr);
            }
            .host{
                background-color: #fff;
                padding: 24px;
                color: #666;
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                text-align: left;
                strong{
                    color: #1A1B1D;
                    font-size: 24px;
                    font-style: normal;
                    font-weight: 700;
                }
                p:last-of-type{
                    margin-bottom: 0px;
                }
                img{
                    width: 100%;
                }
            }
        }
    }

    .attending{
        background-color: #fff;
        padding: 36px 0px;
        @media (min-width: 1024px){
            padding: 64px 0px;
        }
        text-align: center;
        h3{
            color: #0C233F;
            font-size: 35px;
            font-style: normal;
            font-weight: 700;
        }
        .attending-items{
            margin-top: 36px;
            display: grid;
            grid: auto / repeat(2, 1fr);
            @media (min-width: 767px){
                grid: auto / repeat(3, 1fr);
            }
            @media (min-width: 1024px){
                grid: auto / repeat(4, 1fr);
            }
            gap: 24px;
            @media (min-width: 1024px){
               width: 80%;
               margin: 36px auto;
            }
            .item{
                color:  #666;
                text-align: center;
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                display: flex;
                flex-direction: column;
                align-items: center;
                strong{
                    color: #007CBC;
                    font-family: Arial;
                    font-size: 18px;
                    font-style: normal;
                    font-weight: 700;
                    margin-top: 12px;
                }
                p:last-of-type{
                    margin-bottom: 0px;
                }
            }
        }
    }

    .place{
        background-color: #F7F7F8;
        padding: 36px 0px;
        @media (min-width: 1024px){
            padding: 64px 0px;
        }
        .place-wrap{
            display: flex;
            gap: 24px;
            flex-direction: column;
            @media (min-width: 769px){
                flex-direction: row;
            }
            h2{
                color: #0C233F;
                font-size: 35px;
                font-style: normal;
                font-weight: 700;
            }
            p{
                color: #666;
                font-size: 20px;
                font-style: normal;
                font-weight: 400;
                width: 70%;
                a{
                    font-weight: 700;
                }
                @media (min-width: 769px){
                    width: 100%;
                }
            }
        }
        .place-data{
            @media (min-width: 540px){
                display: grid;
                grid: auto / repeat(2, 1fr);
                gap: 24px;
            }
            @media (min-width: 769px){
               display: block;
            }
            @media (min-width: 1440px){
                img{
                    max-width: 461px;
                }
            }
        }
        .place-data,
        .register-form{
            width: 100%;
            @media (min-width: 769px){
                width: calc(50% - 12px);
            }
        }
    }
}