/* 
***************
Import fonts
***************
*/
@font-face {
  font-family: "ABCDiatypeMono-Heavy-Trial";
  src: url("fonts/ABCDiatypeMono-Heavy-Trial.woff") format("woff"),
    url("fonts/ABCDiatypeMono-Heavy-Trial.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "ABCDiatypeMono-Regular-Trial";
  src: url("fonts/ABCDiatypeMono-Regular-Trial.woff") format("woff"),
    url("fonts/ABCDiatypeMono-Regular-Trial.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "ABCDiatypeMono-ThinItalic-Trial";
  src: url("fonts/ABCDiatypeMono-ThinItalic-Trial.woff") format("woff"),
    url("fonts/ABCDiatypeMono-ThinItalic-Trial.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

/* 
***************
General
***************
*/

body,
html {
  font-family: "ABCDiatypeMono-Regular-Trial";
  font-size: 13px;
}

img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--border-radius);
}

/* 
***************
Navigation
***************
*/
#navigation {
  top: 0%;
  width: 100%;
  text-align: left;
  position: sticky;
  display: flex;
  gap: 20px;
}

.navigation-link {
  font-size: 13px;
  color: black;
  text-decoration: none;
}

.navigation-link:hover {
  color: #ddd;
}

.active {
  color: #ddd;
}

/* 
***************
Typography
***************
*/
h2,
p {
  font-family: "ABCDiatypeMono-Regular-Trial";
  font-size: 13px;
  font-weight: normal;
  padding: 0;
  margin: 0;
}

.body-text {
  font-size: 13px;
  padding-right: 50px;
}

/* 
***************
Slider
***************
*/

.container {
  gap: 10px;
  position: relative;
  padding-bottom: 25px;
}

.swiper-slide {
  width: auto;
  height: 300px;
}

.swiper {
  cursor: grab;
}

.swiper:active {
  cursor: grabbing;
}

.swiper-pagination {
  position: absolute;
  bottom: 5px !important;
  width: 100%;
  text-align: center;
}

.swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  background: black;
}

/* 
***************
About
***************
*/
.border-top {
  border-top: 1px solid black;
}

.image-hover {
  position: absolute;
  z-index: 2;
  right: 0;
  opacity: 0;
  transition: opacity 0.1s;
  width: 15%;
  pointer-events: none;
}

/* 
***************
Grid
***************
*/
:root {
  --columns: 12;
  --gap: 5px; // You can adjust the gap size here
}

* {
  box-sizing: border-box;
}

.flex-container {
  font-family: "Helvetica Neue", sans-serif;
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  width: 100%;
  margin-top: 20px;
}

.col {
  flex: 0 0 auto; // Allows flex-basis to be auto-calculated
  box-sizing: border-box;
  border-radius: 5px;
}

/* Correctly calculated column widths considering the gap */
.col-1 {
  flex: 0 0
    calc(
      100% / var(--columns) * 1 -
        (var(--gap) * (var(--columns) - 1) / var(--columns))
    );
}
.col-2 {
  flex: 0 0
    calc(
      100% / var(--columns) * 2 -
        (var(--gap) * (var(--columns) - 2) / var(--columns))
    );
}
.col-3 {
  flex: 0 0
    calc(
      100% / var(--columns) * 3 -
        (var(--gap) * (var(--columns) - 3) / var(--columns))
    );
}
.col-4 {
  flex: 0 0
    calc(
      100% / var(--columns) * 4 -
        (var(--gap) * (var(--columns) - 4) / var(--columns))
    );
}
.col-5 {
  flex: 0 0
    calc(
      100% / var(--columns) * 5 -
        (var(--gap) * (var(--columns) - 5) / var(--columns))
    );
}
.col-6 {
  flex: 0 0
    calc(
      100% / var(--columns) * 6 -
        (var(--gap) * (var(--columns) - 6) / var(--columns))
    );
}
.col-7 {
  flex: 0 0
    calc(
      100% / var(--columns) * 7 -
        (var(--gap) * (var(--columns) - 7) / var(--columns))
    );
}
.col-8 {
  flex: 0 0
    calc(
      100% / var(--columns) * 8 -
        (var(--gap) * (var(--columns) - 8) / var(--columns))
    );
}
.col-9 {
  flex: 0 0
    calc(
      100% / var(--columns) * 9 -
        (var(--gap) * (var(--columns) - 9) / var(--columns))
    );
}
.col-10 {
  flex: 0 0
    calc(
      100% / var(--columns) * 10 -
        (var(--gap) * (var(--columns) - 10) / var(--columns))
    );
}
.col-11 {
  flex: 0 0
    calc(
      100% / var(--columns) * 11 -
        (var(--gap) * (var(--columns) - 11) / var(--columns))
    );
}
.col-12 {
  flex: 0 0
    calc(
      100% / var(--columns) * 12 -
        (var(--gap) * (var(--columns) - 12) / var(--columns))
    );
}

@media (max-width: 768px) {
  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11,
  .col-12 {
    flex: 0 0 calc(100%);
  }
}