.image-wrapper padding: 0 display: grid grid-template-areas: 'info image' 'info tools' grid-template-columns: 25rem 1fr grid-template-rows: 1fr auto gap: 0 height: 100vh .image-fullscreen margin: 0 padding: 0 0 0 3.5rem width: 100% height: 100dvh position: fixed top: -100% left: 0 display: flex opacity: 0 // hide background-color: rgba($black, 0.8) backdrop-filter: blur(1rem) z-index: 21 box-sizing: border-box img margin: auto padding: 0 width: auto height: auto max-width: 100% max-height: 100% object-fit: contain object-position: center transform: scale(0.8) &__active top: 0 opacity: 1 // show transition: opacity 0.3s cubic-bezier(.79, .14, .15, .86) img transform: scale(1) transition: transform 0.2s cubic-bezier(.68,-0.55,.27,1.55) .image-container margin: auto padding: 0.5rem width: 100% height: 100% display: flex overflow: hidden grid-area: image img margin: auto padding: 0 width: auto height: auto max-width: 100% max-height: 100% object-fit: contain object-position: center border-radius: $rad .image-info__container margin: 0 padding: 0 width: 100% height: 100% display: flex flex-direction: column background-color: $black overflow-y: auto grid-area: info .image-info margin: 0 padding: 0 width: 100% display: flex flex-direction: column background-color: $black border-radius: $rad .image-info__header margin: 0 padding: 0.5rem width: 100% height: 2.5rem display: flex justify-content: start align-items: center gap: 0.5rem position: sticky top: 0 z-index: +1 background-image: linear-gradient(to right, rgba($black2, 1), rgba($black, 1)) svg margin: 0 padding: 0 width: 1.25rem height: 1.25rem fill: $primary h2 margin: 0 padding: 0 font-size: 1.25rem font-weight: 600 color: $primary text-overflow: ellipsis overflow: hidden .image-info__content margin: 0 padding: 0.5rem display: flex flex-direction: column gap: 0.5rem color: $white overflow-x: hidden p margin: 0 padding: 0 font-size: 1rem font-weight: 500 text-overflow: ellipsis overflow: hidden table margin: 0 0 0 1rem padding: 0 max-width: 100% overflow-x: hidden border-collapse: collapse tr margin: 0 padding: 0 width: 100% white-space: nowrap td:first-child padding: 0.25rem 1rem 0.25rem 0 width: 50% white-space: nowrap font-size: 1rem font-weight: 500 td:last-child padding: 0.25rem 0 width: 50% max-width: 0 overflow: hidden text-overflow: ellipsis white-space: nowrap font-size: 1rem font-weight: 500 td.empty-table opacity: 0.3 #image-tools margin-bottom: 0.5rem grid-area: tools @media (max-width: 1100px) .image-wrapper padding: 0.5rem display: flex !important flex-direction: column gap: 0.5rem height: auto .image-container margin: 0 auto padding: 0 max-height: 69vh img max-height: 69vh #image-tools margin: 0 .image-info__container margin: 0 padding: 0 width: 100% height: auto display: flex flex-direction: column gap: 0.5rem background: none .image-info__container border-radius: $rad .image-info__header border-radius: $rad $rad 0 0 @media (max-width: $breakpoint) .image-fullscreen padding: 0 0 3.5rem 0 .image-wrapper padding-bottom: 4rem .image-info__content table margin: 0 tr td:first-child width: auto td:last-child width: 75% .image-info__header background-image: none background-color: $black2