@use '../globals' as u;

#operation-section{
    padding:var(--section-padding);
    letter-spacing: .5px;
   
}

.operation{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:2em;
    padding:var(--container-padding);
    position: relative;

    @include u.breakpoint(x-large) {
        gap:0;
    }

    &__heading{
        font-size:var(--headerTwo-size);
        margin-bottom:1em;
        color:var(--secondaryUtil-color);
    }
    
    &__content-wrapper{
        display: flex;
        gap:3em;
        flex-direction: column;
        justify-content: center;
        @include u.breakpoint(x-large) {
            flex-direction: row;
        }
    }

    &__content{
        display: flex;
        gap:2em;
        flex-direction: column;
        align-items: center;
        position: relative;
        @include u.breakpoint(x-large) {
            gap:0;
        }
    }

    &__image{
        clip-path: circle(35% at 50% 50%);        
        width:100%;
        height:20em;

        @include u.breakpoint(medium) {
            max-width: 27.75em;
        }

        @include u.breakpoint(x-large) {
            max-width: 15.75em;
        }
        
        img{
            width:100%;
            height:100%;
            object-fit: cover;
            object-position: 50%;
        }
    }
    
    &__context{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap:1em;
        text-align: center;

        @include u.breakpoint(medium) {
            max-width: 30em;
        }

        @include u.breakpoint(x-large) {
            max-width:26em;
        }
    }

    &__context-heading{
        font-size:var( --headerThree-size);
    }

    &__dotted-line{
        width:1px;
        height:130px;
        display: block;
        border-left: dashed rgba(0, 0, 0, 0.315) 1px;
        background-color:transparent;
        margin-top:.50em;

        @include u.breakpoint(x-large) {
            
            border:none;
        }
    }
}