@import '../../../../style/variables.scss';

.contact-info{
    .contact-list{
        display: flex;
        align-items: stretch;
        flex-wrap: wrap;
        margin: 0 -8px -16px;
        @media only screen and (max-width: 480px){
            justify-content: center;
        }
        @media only screen and (min-width: 640px){
            margin: 0 -12px;
        }
        @media only screen and (min-width: 1440px) {
            margin: 0 -16px;
        }
        li{
            width: 50%;
            padding: 0 8px;
            margin: 0 0 16px;
            @media only screen and (max-width: 480px){
                width: 100%;
            }
            @media only screen and (min-width: 640px){
                font-size: 18px;
                width: 33.3333%;
                margin: 0;
                padding: 0 12px;
            }
            @media only screen and (min-width: 1200px){
                font-size: 18px;
            }
            @media only screen and (min-width: 1440px) {
                font-size: 22px;
                padding: 0 16px;
            }
            .link{
                flex-direction: column;
                align-items: flex-start;
                gap: 0;
                background: $LightCream;
                width: 100%;
                height: 100%;
                padding: 20px;
                align-items: center;
                text-align: center;
                transition: all 0.4s;
                @media only screen and (max-width: 480px){
                    padding: 16px;
                }
                @media only screen and (min-width: 1200px) {
                    padding: 40px 30px;
                    align-items: flex-start;
                    text-align: start;
                }
                @media only screen and (min-width: 1600px) {
                    padding: 50px 60px;
                }
                .icon{
                    margin-bottom: 12px;
                    @media only screen and (min-width: 1200px){
                        margin-bottom: 20px;
                    }
                }
                &:hover{
                    background: $primary;
                    color: $white;
                    .icon{
                        border-color: $white;
                    }
                    .card-title{
                        color: $white;
                        transition: all 0.4s;
                    }
                }
                @media only screen and (min-width: 768px) {
                    .icon{
                        width: 50px;
                        height: 50px;
                    }
                    i{
                        font-size: 34px;
                    }
                }
                @media only screen and (min-width: 1200px) {
                    .icon{
                        width: 70px;
                        height: 70px;
                    }
                    i{
                        font-size: 46px;
                    }
                }
            }
            .card-title{
                display: block;
                margin-bottom: 12px;
                font-weight: 400;
                color: $btnText;
                transition: all 0.4s;
                @media only screen and (min-width: 1200px){
                    margin-bottom: 16px;
                }
                @media only screen and (max-width: 480px){
                    font-size: 16px;
                }
            }
        }
    }
}