#contacts{
    width:90%;
    margin-inline:auto;
    min-height:770px;
    /*position:relative;*/

    >*{position:relative;z-index:2;}

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

    .contacts-wrapper, p{
        max-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;
    }

    .image-wrapper{
        position:absolute;
        width:1357px;
        right:0;
        top:0;
        z-index:1;

        >img{width:100%;}
    }
}

@media only screen and (max-width: 1440px) {
    .section{margin-inline:0!important;}
}

@media only screen and (max-width: 1280px) {
    .section{margin-inline:0!important;}
    #contacts{
        h1 {
            font-size: 96px;
            line-height: 90px;
        }
    }
}


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

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

        p{text-align: center; margin-inline: auto;}

        .contacts-wrapper, p{
            max-width:550px;
        }

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

        .contact-item{
            height:80px;

            p{margin:auto 1rem;}
        }

        .image-wrapper{width: 1200px;top: -80px;}
    }
}


@media only screen and (max-width: 768px) {
    #contacts .image-wrapper{
        width:140%;
    }
}


@media only screen and (max-width: 480px) {
    #contacts{
        min-height:auto;

        p{text-align:auto;}
    }
}