#contacts{
    width:90%;
    margin-inline:auto;
    position:relative;

    h1{
        font-weight:normal;
        margin-bottom:4rem;
    }

    .contacts-wrapper{
        width:768px;
    }

    .contact-item{
        display: flex;
        background: rgba(50, 50, 50, 0.1);
        border: solid 2px gray;
        border-radius: 25px;
        margin-bottom: 1rem;
        position: relative;
        z-index: 2;
        height: 100px;
        transition: 0.3s;
        overflow: hidden;

        p{
            margin:auto 4rem;
        }
    }

    .contact-item:hover{
        background: rgb(150,150,150);
        border-color:white;
    }


}


@media only screen and (max-width: 1280px) {
    #contacts{
        h1 {
            font-size: 96px;
            line-height: 90px;
        }
    }
}


@media only screen and (max-width: 1024px) {
    #contacts{
        width: auto;
        margin-inline: 16px;

        h1 {
            font-size:48px;
            line-height:48px;
            margin-bottom:2rem;
            text-align:center;
        }

        .contacts-wrapper{
            margin-inline:auto;
            max-width: 768px;
            width: auto;
        }

        .contact-item{
            height:80px;

            p{margin:auto 1rem;}
        }
    }
}