/* --- Tiles --- */
.tile-how {
  clip-path: polygon(16px 0%, calc(100% - 16px) 0%, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0% calc(100% - 16px), 0% 16px);
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  margin-top: auto;  
  overflow: hidden;  
  position: relative; 
  flex-shrink: 1; 
}
.tile-how .tile-watermark {
  position: absolute;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.15em;
  margin-right: -0.15em;
  color: var(--accent);
  background-color: rgba(15, 15, 20, 0.9);
  margin-bottom: 0;
  clip-path: polygon(5px 0%, calc(100% - 5px) 0%, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0% calc(100% - 5px), 0% 5px);
  text-align: center;
  pointer-events: none;
  z-index: 2;
  will-change: opacity;
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.tile-how .watermark-before { bottom: 5px; right: calc(50% + 7px); padding: 3px 6px;}
.tile-how .watermark-after { bottom: 5px; left: calc(50% + 6px); padding: 3px 6px;}
.tile-how .tile-divider-line { flex: 0 0 2px; background: var(--accent); z-index: 1; }
.seamless-img {
  width: calc(50% - 1px);
  aspect-ratio: 6/5;
  display: block;
  object-fit: fill;
  background: var(--bg);
  pointer-events: none !important;
}
@keyframes watermarkFaint {
  0% { opacity: 1; }
  20% { opacity: 0.75; }
  100% { opacity: 1; }
}
.tile-how .seamless-img:first-of-type:hover ~ .watermark-before { animation: watermarkFaint 0.5s ease-in-out forwards; }
.tile-how .seamless-img:last-of-type:hover ~ .watermark-after { animation: watermarkFaint 0.5s ease-in-out forwards; }
/* --- Tiles END --- */
/* --- Container for tile-main --- */
@container (max-width: 400px) {
  .tile-main .tile-how {
    flex-direction: column !important;
    height: auto !important;
  }
  .tile-main .tile-how .seamless-img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 6/5 !important;
  }
  .tile-main .tile-how .tile-divider-line {
    flex: 0 0 2px !important;
    width: 100% !important;
    height: 2px !important;
  }
  .tile-main .tile-how .watermark-before {
    right: auto !important;
    left: 5px !important;
    bottom: calc(50% + 5px) !important;
  }
  .tile-main .tile-how .watermark-after {
    left: 5px !important;
    bottom: auto !important;
    top: calc(50% + 5px) !important;
  }
}
/* --- Container for tile-main END --- */
/* --- Media --- */
@media (900px <= width < 1200px) {
  .tile-row.medium { display: flex; flex-direction: row; flex-wrap: wrap; }
  .tile-row.medium .tile-col { flex: 1 1 calc(33.333% - 13.33px); max-width: calc(33.333% - 13.33px); }
}
@media (700px <= width < 900px) {
  .tile-row.medium { display: flex; flex-direction: row; flex-wrap: wrap; }
  .tile-row.medium .tile-col { flex: 1 1 calc(50% - 10px); max-width: calc(50% - 10px); }
}
@media (width < 700px) {
  .tile-row.medium { flex-direction: column; }
  .tile-row.medium .tile-col { flex: 0 0 auto; width: 100%; max-width: 100%; }
}
/* --- Media END --- */