@import url("normalize.css");
@import url("fonts.css");
@import url("colors.css");
@import url("header.css");
@import url("footer.css");
@import url("quest.css");
@import url("sleepers.css");

.main__wrapper {
    font-family: "SourceSans", "Verdana", "Arial", sans-serif;
    font-weight: 500;
    width:85vw;
    max-width: 1600px;
    margin:15vh auto;
}

.link {
    color:var(--main-link);
}

.link:hover {
    color:var(--main-hoverlink);
}

.contacts__header {
    display: flex;
    justify-content: space-between;
}

.contacts__header h1 {
    margin-top:0;
}

.contacts__info {
    display: flex;
    font-size:1.3em;
    flex-direction: column;
}

.contacts__wrapper {
    display:grid;
    grid-template-columns: repeat(2, 48%);
    margin-top:5vh;
    justify-content: space-between;
}

.contacts__item {
    max-width:700px;
    box-shadow: 0 4px 20px rgba(0,0,0, 0.05);
    border-radius:.5rem;
    padding:1rem;
    transition: .3s;
    display: flex;
    flex-direction: column;
}

.contacts__show-info-btn {
    padding:.6rem 1rem;
    background:var(--main-primary);
    border:none;
    border-radius:4px;
    transition: .2s;
}

.contacts__show-info-btn:hover {
    background:var(--main-light);
}

.contacts__item-short-info {
    display: flex;
    flex-direction: column;
    width:60%;
    padding-top: .5em;
}

.contacts__item-inline {
    display: flex;
    justify-content: space-between;
}

.contacts__item-image > img, .contacts__item-image {
    border-radius: 50%;
    max-height:150px;
    width:auto;
}

.contacts__item-short-info h3 {
    font-size:1.7rem;
    margin:0;
}

.contacts__item-full-description {
    margin-top:3vh;
    height:0;
    overflow: hidden;
}

@media screen and (max-width:1550px) {
    .contacts__header {
        flex-direction: column;
    }

    .contacts__wrapper {
        grid-template-columns: 100%;
    }
}

@media screen and (max-width:670px) {
    .contacts__header > h1 {
        font-size:1.4rem;
    }

    .contacts__item-image > img, .contacts__item-image {
        width:100px;
        height:auto;
    }

    .contacts__item-short-info > h3 {
        font-size:1.3rem;
    }
}

@media screen and (max-width:520px) {
    .contacts__item-short-info p {
        margin: .5rem 0 .9rem;
    }

    .contacts__show-info-btn {
        font-size:.85rem;
    }

    .contacts__item-inline {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .contacts__item-short-info {
        width:100%;
    }

    .contacts__item-image {
        margin: 0 auto 1rem;
    }
}

@media screen and (max-width:451px) {
    .main__wrapper {
        width:95vw;
    }
}