.device {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.device__rating {
    display: flex;
    flex-flow: row-reverse;
    justify-self: flex-start;
    gap: 10px;
}

.device__rating--full {
    display: none;
}

.device__fav-icon--header {
    display: none;
}

.device__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-weight: 500;
    font-size: clamp(15px, 12.86px + 0.36vw, 18px);
    line-height: 140%;
    color: var(--seryy);
    position: relative;
    height: max-content;
}

.device__title {
    font-weight: 500;
    font-size: clamp(20px, 15px + 1.3vw, 30px);
    line-height: 117%;
    color: var(--chernyy);
    margin-bottom: 15px;
}

.device__info-title {
    font-weight: 700;
    font-size: clamp(15px, 12.86px + 0.36vw, 20px);
    line-height: 125%;
    color: var(--chernyy);
    margin-bottom: 10px;
}

.device__reviews-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.device__reviews-count {
    font-weight: 500;
    font-size: clamp(15px, 12.86px + 0.36vw, 18px);
    line-height: 140%;
    color: var(--seryy);
}

.device__reviews-btn {
    background: var(--seryy);
    padding: 15px;
    margin-top: 10px;
    font-weight: 500;
    font-size: clamp(15px, 12.86px + 0.36vw, 18px);
    line-height: 140%;
    color: var(--belyy);
    width: 100%;
}

.device__fav-icon {
    position: initial;
    max-width: 26px;
}

.device__characteristics--full {
    display: none;
}

@media (min-width: 768px) {
    .device {
        gap: 50px;
    }

    .device__header {
        margin-bottom: 15px;
    }
    .device__info-title {
        margin-bottom: 15px;
    }
    .device__reviews-header {
        gap: 20px;
        align-items: center;
    }
    .device__reviews-btn {
        display: none;
    }

    .device__characteristics {
        margin-bottom: 20px;
    }

    .device__reviews {
        display: grid;
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(3, auto);
        column-gap: 30px;
    }
    .device__reviews-header {
        grid-area: 1 / 1 / 2 / 3;
        min-width: 0;
    }
    .device__reviews-summary {
        grid-area: 3 / 1 / 4 / 2;
        min-width: 0;
        max-width: 420px;
    }

    .device__reviews-wr {
        grid-area: 3 / 2 / 4 / 3;
        min-width: 0;
    }
    .device__reviews-wr .review__card-text {
        -webkit-line-clamp: 4;
    }

    .device__reviews-gallery .device__review-title {
        display: none;
    }
    .device__main {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(5, auto);
        column-gap: 15px;
        grid-auto-flow: dense;
    }
    .device__title {
        min-width: 0;
        grid-area: 1 / 1 / 2 / 3;
    }
    .device__header {
        min-width: 0;
        grid-area: 2 / 2 / 3 / 3;
    }

    .device__gallery {
        min-width: 0;
        grid-area: 2 / 1 / 4 / 2;
    }
    .device__settings {
        min-width: 0;
        grid-area: 4 / 1 / 5 / 2;
    }
    .device__characteristics {
        min-width: 0;
        grid-area: 5 / 1 / 6 / 3;
        margin: 0;
    }

    .device__conditions {
        min-width: 0;
        position: relative;
        grid-area: 3 / 2 / 5 / 3;
    }
    .device__rating--header {
        display: flex;
    }
}

@media (min-width: 1500px) {
    .device {
        gap: 70px;
    }
    .device__main {
        display: grid;
        grid-template-columns: repeat(3, auto);
        /* title, rating, options take their own height; the tall gallery's extra height goes to the last row */
        grid-template-rows: auto auto auto 1fr;
        column-gap: 30px;
        grid-auto-flow: dense;
	    }
    .device__title {
        min-width: 0;
        grid-area: 1 / 2 / 2 / 3;
    }
    .device__header {
        min-width: 0;
        grid-area: 1 / 3 / 2 / 4;
    }
    .device__rating {
        min-width: 0;
        grid-area: 2 / 2 / 3 / 3;
    }
    .device__gallery {
        min-width: 0;
        grid-area: 1 / 1 / 5 / 2;
    }
    .device__settings {
        min-width: 0;
        grid-area: 3 / 2 / 4 / 3;
    }
    .device__characteristics {
        min-width: 0;
        grid-area: 4 / 2 / 5 / 3;
    }
    .device__conditions {
        min-width: 0;
        grid-area: 2 / 3 / 5 / 4;
        position: relative;
        margin-top: -40px;
    }
    .device__rating--full {
        display: flex;
    }
    .device__fav-icon--header {
        display: block;
    }
    .device__rating--header {
        display: none;
    }
    .device__characteristics--full {
        display: block;
    }
	@media (min-width: 1800px) {
		.device__main{
			grid-template-columns: repeat(2, auto) 535px;
		}
	}
}
