.tablet{
    position: relative;
    width: 100%;
    height: 470px;
    overflow: hidden;
    padding: 7px;
    box-sizing: border-box;
    background-color: brown;
    --tablet-image-scale: 1.08;
    --tablet-image-focus-x: 50%;
    --tablet-image-focus-y: 40%;
}

.tablet-container{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tablet-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--tablet-image-focus-x) var(--tablet-image-focus-y);
    display: block;
    transform: translateY(0) scale(var(--tablet-image-scale));
    transform-origin: var(--tablet-image-focus-x) var(--tablet-image-focus-y);
    will-change: transform;
}

/* 響應式設計 */
@media (max-width: 768px){
    .tablet{
        height: 350px;
        --tablet-image-scale: 1.18;
        --tablet-image-focus-y: 38%;
    }
}

@media (max-width: 480px){
    .tablet{
        height: 250px;
        --tablet-image-scale: 1.26;
        --tablet-image-focus-y: 36%;
    }
}