@font-face {
       font-family: 'pata';
       src: url(../font/Helvetica.ttf);
}

@font-face {
       font-family: 'PPNeu';
       src: url(../font/PPNeueMachina-InktrapRegular.otf);
}

@font-face {
       font-family: 'super';
       src: url(../font/LINESeedSansTH_W_Th.woff2);
}

* {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
       overflow-x: hidden;

       font-family: 'pata';
}



*::-webkit-scrollbar {
       display: none;
}

* {

       -ms-overflow-style: none;
       /* Internet Explorer 10+ */
       scrollbar-width: none;
       /* Firefox, Safari 18.2+, Chromium 121+ */
}

p {
       font-family: 'super';
}

body{
       min-height: 100vh;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;


}

.back {
       text-decoration: none;
       color: black;
       font-size: 24px;
       height: 40px;

       font-family: 'super';

       position: fixed;
       top: 15px;
       left: 20px;
       transition: all 1s;
       display: block;
       font-weight: 700;
}

.back:hover {
       transform: translateX(-10%);
}

.container {
       display: flex;
       justify-content: center;
       align-items: center;
       /* min-height: 100vh; */

       padding: 100px 30px;

       flex-direction: row;
       flex-wrap: wrap;

       gap: 100px;
}

.container p {
       color: black;
}

.pin {
       column-count: 5;
       padding: 0px .0em .0em .0em;
       column-gap: .0em;
}

@media screen and (max-width: 1200px) {
       .pin {
              column-count: 3;
       }
       
}

@media screen and (max-width: 700px) {
       .pin {
              column-count: 2;
       }

       .container{
              padding: 100px 5px;
       }
       
}


.pin-item {
       -webkit-column-break-inside: avoid;
       break-inside: avoid;
       page-break-inside: avoid;
       margin-bottom: .0em;

       overflow: hidden;

       transition: all 0.3s ease-in-out !important ;

}

.pin-item img:hover {
       /* transform: scale(1.05); */
}

.pin-item img {
       width: 100%;
       display: block;
       /* border-radius: 8px; */

       transition: all 0.3s ease-in-out !important ;

}

.cardcover {
       position: relative;
       width: 300px;
       height: 150px;
       overflow: hidden;
       perspective: 800px;
       --cardimage-translate-x: 0px;
       --cardimage-translate-y: 0px;
       --cardimage-scale: 1;
}

@media screen and (max-width: 310px) {
       .cardcover {
              width: 200px;
       }
       
}

.cardimage {
       width: 100%;
       height: 120%;
       object-fit: cover;
       object-position: center;
       transition: transform 0.35s ease-out;
       transform: translate3d(var(--cardimage-translate-x), var(--cardimage-translate-y), 0)
              scale(var(--cardimage-scale));
       will-change: transform;
}

.cardcover.is-hovering .cardimage {
       transition-duration: 0.2s;
}

.cardcontrol{
       filter: drop-shadow(0 10px 10px rgba(0,0,0,0.3));
}

.scaledown{

}

@media screen and (max-width: 300px) {
       .scaledown{
              font-size: 23px;
       }
       
}