.frame {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--_sizes---desctop);
    box-sizing: content-box;
}

@media screen and (min-width: 1440px) {
  .frame {
    width: var(--_sizes---pc);
  }
}

@media screen and (max-width: 991px) {
  .frame {
    width: var(--_sizes---tablet);
  }
}

@media screen and (max-width: 767px) {
  .frame {
    width: var(--_sizes---phone-horizontal);
  }
}

@media screen and (max-width: 479px) {
  .frame {
    width: var(--_sizes---phone);
  }
}


.plate > * {
    box-sizing: content-box;
}

.plate {
    font-family: "Cascadiamono Variablefont Wght", monospace;
    font-size: 162px;
    line-height: 0.7;
    position: relative;
    box-sizing: content-box !important;
    width: 100%;
    /* height: 100%; */
    /* height: 222px; */
    aspect-ratio: 1032 / 222;
    /* border-radius: 15px; */
    border-radius: 2.08% / 9.65%;

    --tilt-x: 0deg;
    --tilt-y: 0deg;
    transform: perspective(1600px) rotateY(var(--tilt-y, 0deg)) rotateX(var(--tilt-x, 0deg));

    --outer-shadow-x: 4px;
    --outer-shadow-y: -4px;
    --outer-shadow-blur: 2px;
    --outer-shadow-spread: 0px;
    --outer-shadow-color: rgba(0, 0, 0, 1);

    --outer-highlight-x: -3px;
    --outer-highlight-y: 3px;
    --outer-highlight-blur: 2px;
    --outer-highlight-spread: 0px;
    --outer-highlight-color: rgba(255, 255, 255, 0.7);

    --inner-shadow-x: -3px;
    --inner-shadow-y: 3px;
    --inner-shadow-blur: 4px;
    --inner-shadow-spread: 0px;
    --inner-shadow-color: rgba(0, 0, 0, 1);

    --inner-highlight-x: 3px;
    --inner-highlight-y: -3px;
    --inner-highlight-blur: 4px;
    --inner-highlight-spread: 0px;
    --inner-highlight-color: rgba(255, 255, 255, 1);
}

.plate__content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 7px;
}

.plate__inner {
    position: absolute;
    top: 4.65%;
    left: 1%;
    width: calc(100% - 2*1%);
    height: calc(100% - 2*4.65%);
    background-color: #ffffff;
    border-radius: 1% / 4.65%;
    /* margin: 2%; */
    z-index: -2;
    /* padding: 47px 19px 47px 24px; */

    box-shadow: 
        var(--inner-shadow-color)
        var(--inner-shadow-x)
        var(--inner-shadow-y)
        var(--inner-shadow-blur)
        var(--inner-shadow-spread) inset,
        var(--inner-highlight-color)
        var(--inner-highlight-x)
        var(--inner-highlight-y)
        var(--inner-highlight-blur)
        var(--inner-highlight-spread) inset;
}

.plate__outer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #171B2F;
    /* padding: 8px;
    margin: -8px; */
    z-index: -3;
    border-radius: 2% / 9.3%;

    box-shadow: 
        var(--outer-shadow-color) 
        var(--outer-shadow-x) 
        var(--outer-shadow-y) 
        var(--outer-shadow-blur) 
        var(--outer-shadow-spread) inset,
        var(--outer-highlight-color)
        var(--outer-highlight-x)
        var(--outer-highlight-y)
        var(--outer-highlight-blur)
        var(--outer-highlight-spread) inset;
}

.plate--highlighted {
    /* color: rgb(60, 60, 60); */
    /* position: relative; */
    /* background-color: rgb(242, 242, 236); */
    box-shadow: 
        var(--outer-shadow-color) 
        var(--outer-shadow-x) 
        var(--outer-shadow-y) 
        var(--outer-shadow-blur) 
        var(--outer-shadow-spread) inset,
        var(--outer-highlight-color)
        var(--outer-highlight-x)
        var(--outer-highlight-y)
        var(--outer-highlight-blur)
        var(--outer-highlight-spread) inset;
    /* border-radius: 10px; */
}

.plate--highlighted__inner {
    /* position: absolute; */
    /* top: 0; */
    /* left: 0; */
    /* width: 100%; */
    /* height: 100%; */
    /* content: ""; */
    /* scale: 0.98 0.93; */
    border-radius: 10px;
    box-shadow: 
        var(--inner-shadow-color)
        var(--inner-shadow-x)
        var(--inner-shadow-y)
        var(--inner-shadow-blur)
        var(--inner-shadow-spread) inset,
        var(--inner-highlight-color)
        var(--inner-highlight-x)
        var(--inner-highlight-y)
        var(--inner-highlight-blur)
        var(--inner-highlight-spread) inset;
}