@import "~/styles/partials/variables";
@import "~/styles/partials/mixins";
@import "~/styles/partials/iconVariables";

.about{
    &--values{
        &-content{
            // width: 60%;
            @include max(1024){
                width: 100%;
            }
        }
    }
    &--banner {
        @include max(1024) {
            align-items: flex-start;
        }

        &-content {
            @include max(1024) {
                padding-top: 108px;
            }
        }
        .banner--container-shade {
            &::before {
                background: none;
            }
        }
    }
    &--contact {
        &-btn {
            &:hover {
                background-color: $white;
                color: $black;
            }
        }
    }
}
.hover{
    &--card{
        overflow: hidden;
        transition: all 0.5s ease;
        &-image{
            transition: all 0.5s ease;
            width: 100%;
        }
        &::before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            background: rgba($primary, 0.2);
            width: 100%;
            height: 100%;
            border-radius: 10px;
            opacity: 1;
            // transition: all 0.5s ease;
            @include max(1024){
                content: none;
            }

        }
        &-content{
            position: absolute;
            bottom: 20px;
            backdrop-filter: blur(5px);
            background: rgba($blackPrimary, 0.8);
            min-height: 122px;

            &-hidden{
                max-height: 0px;
                opacity: 0;
                transition: all 0.5s ease;
                @include max(1024){
                    max-height: 100%;
                    opacity: 1;
                }
            }
            &-title{
                position: relative;
                @include max(1680){
                    padding-right: 40px;
                }
                @include max(1024){
                    margin-bottom: 15px;
                }
                &::after {
                    content: $lt--diagonal-arrow;
                    position: absolute;
                    top: 0;
                    right: 0;
                    margin-left: 10px;
                    font-size: 14px;
                    font-weight: $normal;
                    transition: all 0.5s ease;
                    display: inline-block;
                    @include maxOrientation(1024, portrait) {
                      transform: rotate(45deg);
                    }
                }
            }
        }
        &:hover{
            &::before{
                opacity: 0;
            }
            .hover--card-image{
                transform: scale(1.1);
            }
            .hover--card-content{
                &-hidden{
                    max-height: 500px;
                    height: 100%;
                    margin-top: 15px;
                    opacity: 1;
                }
                &-title{
                    &::after {
                        transform: rotate(45deg);
                    }
                }
            }
        }
    }
}