@media screen and (min-width: 768px){
	.container {
		max-width: 768px; 
	}

    .header-navigation {
        display: flex;
        margin-right: auto;
        align-items: center;
    }
    .header-logo {
        padding-bottom: 22px;
    }
    .header-list {
        display: flex;
        gap: 30px;
    }
    .header-link {
        display: block;
        position: relative;
        padding-top: 24px;
        padding-bottom: 22px;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.5;
        letter-spacing: 0.02em;
        color: var(--title-color);
        transition: color var(--transition-property);
    }
    .contacts-list {
        display: flex;
        flex-direction: column;
        /* justify-content: center; */
        gap: 4px;
    }
    .contacts-link {
        font-size: 12px;
        line-height: 1.3;
        letter-spacing: 0.04em;
    }

    .mob-menu, .menu-open-button {
        display: none;
    }

    .hero {
        padding-bottom: 108px; 
        background-image: linear-gradient(
                rgba(46, 47, 66, 0.7),
                rgba(46, 47, 66, 0.7)
            ),
            url("../images/hero/hero-bg-tab.jpg");
    }
    @media (min-device-pixel-ratio: 2),
        (min-resolution: 192dpi),
        (min-resolution: 2dppx) {
        .hero {
            background-image: linear-gradient(
                rgba(46, 47, 66, 0.7),
                rgba(46, 47, 66, 0.7)
            ),
            url("../images/hero/hero-bg-tab-2x.jpg");
        }
    }
    .hero-title {
        margin-bottom: 40px;
        max-width: 496px;
        font-size: 56px;
    }

    .section-skills {
        padding-bottom: 96px;
    }
    .skills-item-title {
        text-align: left;
    }
    .skills-list{
        flex-direction: row;
        flex-wrap: wrap;
	    row-gap: 72px;
        column-gap: 24px;
    }
    .skills-item {
        width: calc((100% - 1 * 24px) / 2);
    }

    .team-list {
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: 24px;
        row-gap: 64px;
        justify-content: center;
    }
    .team-item {
        width: 264px;
    }

    .customers-list {
        column-gap: 24px;
    }
    .customers-item {
        width: calc((100% - 2 * 24px) / 3);
        height: 88px;
    }

    .portfolio {
        padding-top: 64px;
        padding-bottom: 96px;
    }
    .filters-list {
        flex-direction: row;
        margin-bottom: 64px;
        justify-content: center;
    }
    .filters-btn {
        padding: 12px 24px;
    }
    .portfolio-list {
        flex-direction: row;
        row-gap: 72px;
        column-gap: 24px;
        justify-content: start;
    }
    .portfolio-item {
        width: calc((100% - 1 * 24px) / 2);
    }

    .footer-content {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 72px 24px;
    }
    .footer-text-content {
        align-items: start;
    }
    .footer-text {
        max-width: 264px;
    }
    .footer-contacts {
        align-items: start;
    }
    .footer-subscribe {
        align-items: start;
    }
    .footer-input-wrap {
        flex-direction: row;
        gap: 24px;
    }
    .footer-form-input {
        width: 264px;
    } 

    .modal {
        max-width: 408px;
        padding: 72px 24px 24px 24px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1200px){ 
    .container.footer-content {
        max-width: none;
        padding-left: 108px;
        padding-right: 108px;
    }
    .section-customers > .container {
        padding: 0;
    }
    .section-customers {
        padding-left: 108px;
        padding-right: 108px;
    }
    .contacts-link.link-email {
        margin-top: 24px;
    }
}