.screen:not(:last-child) {
    margin-bottom: 1rem;
}

@media (min-width: 480px) {
    .screens {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .screen:not(:last-child) {
        margin-bottom: 0;
    }
}

@media (min-width: 768px) {
    .screens {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (min-width: 1280px) {
    .screens {
        gap: 30px;
    }
}

/* slider */
.slider-next, .slider-prev {
    display: none;
}

.screen-image {
    height: 16rem;
}

@media (min-width: 480px) {
    .screen-image {
        height: 19rem;
    }
}

@media (min-width: 640px) {
    .screen-image {
        height: 30rem;
    }
}

@media (min-width: 1024px) {
    .screen-image {
        height: 80vh;
    }

    .slider-next, .slider-prev {
        display: flex;
    }
}

@media (min-width: 2560px) {
    .slider-next {
        right: 12%;
    }

    .slider-prev {
        left: 12%;
    }
}