:root {
    --bg-color: black;
    --max-width: 32rem;
    --width-cards: 90vw;
    --white-bg: rgb(242, 244, 246);
    --border-radius: 0.5rem;
    --gray-color: rgb(113, 115, 115);
    --transition: 0.1s all ease-in;
    --box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    --bg-card: rgba(147, 150, 152, 0.95);
}



.screenView{
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}


.sw2{
    background-image: url('https://cdn.sanity.io/images/gtd4w1cq/production/4ef2af4fc4259cb398efe107002fca5355159f73-4096x2305.jpg?auto=format');
}
.sw3{
    background-image: url('https://cdn.sanity.io/images/gtd4w1cq/production/78bfd6170afb779295045db92fdd42d535fbb767-4096x2305.jpg?auto=format');
}
.sw4{
    background-image: url('https://cdn.sanity.io/images/gtd4w1cq/production/4827b685a9766c5d9db152a8f60284dab41d4def-4096x2304.jpg?auto=format');
}
.sw5{
    background-image: url('https://cdn.sanity.io/images/gtd4w1cq/production/2e27c9b97e5643f36b5f3b36621961740be27653-3000x1877.jpg?auto=format');
}
.sw6{
    background-image: url('https://cdn.sanity.io/images/gtd4w1cq/production/3c753d75076a8357eb7b1dd4e6e2f3e62a43ac33-4096x2304.jpg?auto=format');
}
.sw7{
    background-image: url('https://cdn.sanity.io/images/gtd4w1cq/production/cc924bebbeb2ae69b15662b1723ae932edddcf59-4096x2304.jpg?auto=format');
}

.productCard{
    height: 10.25rem;
    background-color: var(--white-bg);
    position: absolute;
    bottom: 1em;
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    color: var(--bg-color);
    padding: .5rem;
    width: var(--width-cards);
    max-width: var(--max-width);
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    z-index: 11;
}
.grayBG{
    background-color: var(--bg-card);
}

.cardParts{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2em;
    padding: 1em;
}

.productCard h1{
    font-family: inherit;
    font-size: 1.5em;
    line-height: 1.625rem;
    font-weight: 100;
    text-transform: none;
}
.productCard h3{
    font-size: 0.6875em;
    line-height: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
}
.productCard h2{
    font-family: "Doto", sans-serif;
    text-transform: none;
    font-size: 1.25em;
    line-height: 1em;
    font-weight: 600;
}

.cardPart2{
    display: flex;
    justify-content: end;
    flex-direction: column;
    padding: 1em;
}

.cardPart2 img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    scale: 1.3;
    position: relative;
}
.cardPart2 span{
    position: absolute;
    right: 3em;
    bottom: 2em;
    background-color: rgb(230, 231, 231);
    padding: 0.25em 1em;
    border-radius: var(--border-radius);
    font-size: 0.6875em;
    line-height: 1.1em;
    font-weight: 400;
}

.grayBG span{
    background-color: rgb(73, 77, 78);
}
.grayBG{
    color: var(--white-bg);
}


.dot{
    background-color: #fff;
}

@media(max-width: 375px){
    .productCard{
        min-height: 10.25rem;
        height: fit-content;
    }
    .cardPart2 img{
        width: 40vw;
        max-width: 100%;
    }
}