@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=New+Rocker&family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');




body{
    height: 100vh;
    margin: 0px;
    padding: 0px;
    font-family: "Josefin Sans", sans-serif;
    background-color: #FAFBFF;
    color: #110106;
}

p,h1,h2,i{
    margin: 0px;
}

h1{
    margin: 0px;
font-family: "New Rocker", system-ui;
color: #4D0101;
text-align: center;
}

.general{
    margin-top: 20px;
    width: 100%;
    height: 100%;
}

.skt-container{
    height: 100%;
    display: grid;
    grid-template-rows: 80% 1fr;
}

.skt-slide{
    display: grid;
    grid-template-columns: 30% 1fr 30%;
    margin:20px;
    background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='40' height='40' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='%23ffffffff'/><path d='M11 6a5 5 0 01-5 5 5 5 0 01-5-5 5 5 0 015-5 5 5 0 015 5'  stroke-width='1' stroke='none' fill='%23f2f2f2ff'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
border-radius: 10px;
background: #FAFBFF;
box-shadow: inset 9px 9px 19px #d5d5d9,
            inset -9px -9px 19px #ffffff;
    overflow: hidden;
}

.sketches {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 1200px;
}

/* base card */
.sketches > div {
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: center center;
    transition:
        transform 600ms cubic-bezier(.25,.9,.35,1),
        filter 400ms ease;
    opacity: 0;
    pointer-events: none;
    box-shadow:
        0 6px 0 rgba(0,0,0,.25),
        0 18px 32px rgba(0,0,0,.2);
}

/* center */
.sketches > div.current {
    transform:
        translate(-50%, -50%)
        scale(1.05)
        rotateZ(0deg);
    opacity: 1;
    z-index: 3;
    filter: none;
    pointer-events: auto;
}

/* left */
.sketches > div.prev {
    transform:
        translate(-200%, -48%)
        scale(0.9)
        rotateZ(-6deg);
    opacity: 0.6;
    z-index: 2;
    filter: grayscale(.25);
}

/* right */
.sketches > div.next {
    transform:
        translate(100%, -48%)
        scale(0.9)
        rotateZ(6deg);
    opacity: 0.6;
    z-index: 2;
    filter: grayscale(.25);
}

.skt-left{
    z-index: 4;
}

.skt-right{
    z-index: 4;
}

.skt-button{
    border: 0px;
    height: 100%;
    width: 100%;
    cursor: pointer;
    background-color: transparent;
    font-size: 20px;
}

.a{
    width: 296px;
    height: 410px;
    border: 1px solid transparent;
    outline: 1px solid #110106;
    outline-offset: -10px;
    border-radius: 10px;
        position: relative;
    overflow: hidden;
}

.a .artwork {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* signature overlay */
.a .signature {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 40px;
    opacity: 0.85;
    pointer-events: none;
    filter: contrast(1.1);
}
.skt-info{
    padding: 0px 20px;

}

.skt-info-det{
    grid-area: 1 / 1 / 2 / 2;
}

.skt-info-desc{
    grid-area: 1 / 2 / 2 / 3;
}

.skt-text{
    grid-area: 2 / 2 / 3 / 3; 
}

.skt-text p{
    text-align: justify;
}

.skt-quick-info{
    grid-area: 2 / 1 / 3 / 2; 
background-color: #4D0101;
color: white;
padding: 10px;
border-radius: 10px;
    box-shadow:
        0 6px 0 rgba(0,0,0,.25),
        0 18px 32px rgba(0,0,0,.2);
}

.skt-info > *{
    margin-bottom: 10px;
}

#description{
    border-left: 5px solid #4D0101;
    padding-left: 10px;
}

#value{
    background-color: #4D0101;
    color: #d5d5d9;
    padding: 2.5px 5px;
    border-radius: 5px;
}