@use '../../utils' as *;

/*----------------------------------------*/
/*  5.1 event
/*----------------------------------------*/

.event{
    &__content{
        .subtitle{
            font-family: var(--rr-ff-heading);
            font-style: normal;
            font-weight: 400;
            font-size: 15px;
            line-height: 26px;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: #0E1730;
            margin-bottom: 10px;
        }
        .title{
            font-family: var(--rr-ff-heading);
            font-style: normal;
            font-weight: 400;
            font-size: 48px;
            line-height: 50px;
            text-transform: capitalize;
            color: #0E1730;
            margin-bottom: 20px;
            @media #{$xs} {
                font-size: 40px;
                line-height: 50px;
            }
        }
        .dec{
            font-family: var(--rr-ff-body);
            font-style: normal;
            font-weight: 400;
            font-size: 16px;
            line-height: 27px;
            color: #595959;
            margin-bottom: 0;
            @media #{$lg, $md, $sm, $xs} {
                br{
                    display: none;
                }
            }
        }
        &-wrap{
            display: flex;
            align-items: center;
            gap: 30px;
            flex-wrap: wrap;
            row-gap: 20px;
            .item{
                display: inline-flex;
                align-items: center;
                gap: 15px;
                padding: 10px 20px;
                border: 1px solid #E7E7EB;
                h3{
                    font-family: var(--rr-ff-heading);
                    font-style: normal;
                    font-weight: 400;
                    font-size: 48px;
                    line-height: 50px;
                    text-transform: capitalize;
                    color: #0E1730;
                    margin-bottom: 0;
                }
                h6{
                    font-family: var(--rr-ff-heading);
                    font-style: normal;
                    font-weight: 400;
                    font-size: 20px;
                    line-height: 26px;
                    color: #0E1730;
                    margin-bottom: 0;
                }
            }
        }
    }
    &__thumb{
        @media #{$sm, $xs} {
            margin-top: 30px;
        }
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}