.menu{
    position: fixed;
    align-items: end;
    width: calc(100vw - 20px);
}
.content {padding: 20px;}
.content .text-content {
    display: flex;
    flex-direction: column;
    height: fit-content;
    padding: 60px 0;
    gap: 20px;
}
.content .image-content{
    margin: auto;
}
.block.text {
    width: fit-content;
    max-width: 60vw;
}
.text-content .block.text > :last-child {
  padding-bottom: 75px;
}

/* Scrollbar */
  .block.text::-webkit-scrollbar {
    width: 16px;
  }

  .block.text::-webkit-scrollbar-track {
    background: #d494cc;
    box-shadow: inset 1px 1px 0 #4a1040, inset -1px -1px 0 #f5c8f0;
  }

  .block.text::-webkit-scrollbar-thumb {
    background: #e8a8e2;
    border-top: 2px solid #f5c8f0;
    border-left: 2px solid #f5c8f0;
    border-right: 2px solid #4a1040;
    border-bottom: 2px solid #4a1040;
    min-height: 20px;
  }

  .block.text::-webkit-scrollbar-thumb:hover {
    background: var(--highlight);
  }

  .block.text::-webkit-scrollbar-thumb:active {
    border-top: 2px solid #4a1040;
    border-left: 2px solid #4a1040;
    border-right: 2px solid #f5c8f0;
    border-bottom: 2px solid #f5c8f0;
  }

  .block.text::-webkit-scrollbar-button {
    background: #e8a8e2;
    border-top: 2px solid #f5c8f0;
    border-left: 2px solid #f5c8f0;
    border-right: 2px solid #4a1040;
    border-bottom: 2px solid #4a1040;
    height: 16px;
    width: 16px;
    display: block;
  }

  .block.text::-webkit-scrollbar-button:active {
    border-top: 2px solid #4a1040;
    border-left: 2px solid #4a1040;
    border-right: 2px solid #f5c8f0;
    border-bottom: 2px solid #f5c8f0;
  }

  .block.text::-webkit-scrollbar-button:vertical:decrement {
    background-color: #e8a8e2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpolygon points='8,4 13,11 3,11' fill='%2337011e'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
  }

  .block.text::-webkit-scrollbar-button:vertical:increment {
    background-color: #e8a8e2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpolygon points='8,12 13,5 3,5' fill='%2337011e'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
  }
.block.text::-webkit-scrollbar-button:vertical:decrement:increment,
.block.text::-webkit-scrollbar-button:vertical:increment:decrement {
  display: none;
}

  .block.text::-webkit-scrollbar-corner {
    background: #d494cc;
  }

  /* Firefox scrollbar fallback */
@supports not selector(::-webkit-scrollbar) {
    .block.text {
        scrollbar-width: thin;
        scrollbar-color: var(--highlight) var(--bkg-col);
    }
}

/* END of  Scrollbar */

figure {
    height: 60vh;
    height: initial;
    flex-direction: column;
}
figure img.landscape{min-width: 515px; width: 100%;}
figure img.square{min-width: 400px;}
figure img.portrait{min-width: 450px;}

@media screen and (max-width: 500px) {
    .menu{
        justify-content: space-between;
        position: relative;
        width: 100%;
    }
    .menu .icon:only-child{margin: auto;}
    .content{
        padding: 100px 0;
        position: relative;
        flex-direction: column;
        height: fit-content;
        padding-bottom: 200px;
    }
    .content .text-content{ padding-top: 0;}
    .block.text{
        max-width: 90vw;
        max-height: initial;
    }
    .text-content .block.text > :last-child {
      padding-bottom: 0;
    }
    figure img.square,
    figure img.portrait,
    figure img.landscape {
        margin-left: -15px;
    }
    figure img.landscape,
    figure img.square{min-width: 80vw;}
    figure img.portrait{min-width: 70vw;}
}

@media screen and (max-height: 500px) and (orientation: landscape) {
    .menu{
        justify-content: space-around; 
        align-items: center; 
        width: 100%;
        height: 35vh;
    }
    .content{
        font-size: 0.8rem;
        padding: 60px 0;
        flex-direction: column;
        height: fit-content;
    }
    .block.text{
        max-width: 75vw;
        max-height: initial;
    }
    figure{height: initial;}
    /* .block.image figure{max-height: 120vh;} */
    figure figcaption{font-size: 1.2rem;}
    figure img.landscape{min-width: none;}
    figure img.portrait{min-width: none;}
    figure img.square { min-width: none;}
}