*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  user-select: none;
}

img {
  display: block;
  max-width: 100%;
  min-width: 100%;
  height: auto;
}


h1 {

  font-size: clamp(26px, 3.3vw, 40px);
  font-weight: 650;
}

h2 {
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: bold;
}

h3 {
  margin-block-end: clamp(12px, 1.3vw, 16px);
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 600;
}

h4 {
  margin-block-end: clamp(10px, 1.1vw, 14px);
  font-size: clamp(18px, 2vw, 20px);
  font-weight: 600;
}

h5 {
  margin-block-end: clamp(8px, 1vw, 12px);
  font-size: clamp(16px, 1.8vw, 18px);
  font-weight: 500;
}


.gallery::-webkit-scrollbar {
  width: 3px;
}

.gallery::-webkit-scrollbar-track {
  background: transparent;
}

.gallery::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 999px;
}

.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.28s ease;
}

.modal-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.modal-inner>* {
  min-width: 0;
}

.gallery {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow-y: auto;

}

.slider {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.slide {
  width: 100%;
  max-width: 100%;
}

.slide img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.slide video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  
}

.header-wrapper {
  margin-bottom: clamp(24px, 3.3vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 100%;
  padding: clamp(100px, 10.4vw, 200px) clamp(50px, 5.2vw, 100px);
  overflow-y: auto;
  font-size: clamp(12px, 1.3vw, 16px);
  scrollbar-width: none;
}

.desc {
  max-height: 100%;
  margin-block-end: clamp(20px, 2.5vw, 35px);
  font-size: clamp(12px, 1vw + 2px, 14px);
  font-weight: 425;
  white-space: pre-line; 
}

.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: clamp(30px, 3.1vw, 45px);
  padding: clamp(8px, 1vw, 15px) clamp(10px, 1vw, 12px);
  border: 1px solid var(--dark);
  border-radius: 999px;
  box-sizing: border-box;
  font-size: clamp(12px, 1.3vw, 16px);
  font-weight: 525;
  white-space: nowrap;
}


.meta {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vw, 12px);
  padding-block-start: clamp(20px, 2.5vw, 35px);
  border-block-start: 1px solid var(--dark);
}

.meta-item {
  display: flex;
  align-items: flex-start;
}

.meta-item label {
  padding-inline-end : 16px;
  flex-shrink: 0;
  font-weight: 650;
  white-space: nowrap;
}

.meta-item .meta-value-container,
.meta-item p {
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.4vw, 4px);
  margin: 0;
  color: #0f0f0f;
  font-size: clamp(12px, 1.3vw, 16px);
}

#modalLinkContainer {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(6px, 1vw, 10px);
}


.modal-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: clamp(135px, 14vw, 170px);
  height: clamp(30px, 3.1vw, 45px);
  margin-block-end: clamp(20px, 2.5vw, 30px);
  padding: clamp(10px, 1vw, 14px);
  border: 1px solid transparent;
  border-radius: 50px;
  background-color: var(--light);
  color: var(--dark);
  font-size: clamp(12px, 1.3vw, 16px);
  font-weight: 525;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.modal-button:hover {
  background-color: var(--accent) !important;
}

.modal-button::after {
  content: "";
  display: inline-block;
  width: clamp(16px, 1.6vw, 24px);
  height: clamp(16px, 1.6vw, 24px);
  flex-shrink: 0;
  background-color: var(--dark);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.modal-button.btn-buy::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h1.75l.75 3m0 0L7 16h13l2.5-10H4.5z'/%3E%3Ccircle cx='7' cy='19.5' r='1.5'/%3E%3Ccircle cx='20' cy='19.5' r='1.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h1.75l.75 3m0 0L7 16h13l2.5-10H4.5z'/%3E%3Ccircle cx='7' cy='19.5' r='1.5'/%3E%3Ccircle cx='20' cy='19.5' r='1.5'/%3E%3C/svg%3E");
}

.modal-button.btn-website::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'%3E%3C/path%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'%3E%3C/path%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'%3E%3C/path%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'%3E%3C/path%3E%3C/svg%3E");
}


[dir="ltr"] .modal-button.btn-buy::after {
  transform: scaleX(-1);
}


@media (max-width: 768px) {
  body {
    overflow: auto;
  }

  .modal {
    position: static;
    align-items: stretch;
    justify-content: stretch;
  }

  .modal-inner {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    width: 100%;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .gallery {
    grid-row: 2;
    width: 100%;
    height: auto;
    overflow: visible;
  }

  .slider,
  .slide {
    height: auto;
  }

  .slide img {
    width: 100%;
    height: auto;
  }

  .info {
    grid-row: 1;
  
    min-height: auto;
    overflow: visible;
  }
}