@import url(fonts.css);



.html {
  font-family: inherit;
  scroll-behavior: smooth;
}

body {
  background-color: #f3f3f3;
  color: #1e1e1e;
}

.gallery-item img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
}

.nav-link {
  font-size: 16px;
  transition: color 0.3s ease;
  font-weight: 500;
}

.nav-link:hover {
  color: #f2f2f2;
}

.galeria {
  font-family: "League", -apple-system, Roboto, Helvetica, sans-serif; 
  text-transform: uppercase;
  letter-spacing: 1px;
}

main, aside {
  background-color: #1e1e1e;
  color: #f3f3f3;
}

p {
  font-family: "Satoshi", -apple-system, Roboto, Helvetica, sans-serif;
  font-size: 14px; 
  font-weight: 600;
    text-transform: none;
}

/* Hero */

h1:not([class]) {
    font-family: "League", sans-serif;
    font-size: 3rem;
    font-weight: normal;
}

.home-hero {
    position: relative;
    display: grid;
    overflow: hidden;
    grid-auto-flow: dense;
    column-gap: 1rem;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto);
    align-content: start;
    padding: 1rem;
    border-bottom: 7px solid #1E1E1E;
    row-gap: 0;
    min-height: unset;
}

@media screen and (max-width: 900px) {
    .home-hero {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media screen and (max-width: 600px) {
    .home-hero {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-bottom: 4px solid #1E1E1E;
    }
}

@media screen and (min-width: 364px) {
    .home-hero {
        grid-template-rows: auto auto repeat(4, auto);
        min-height: unset;
    }
}

@media screen and (min-width: 404px) {
    .home-hero {
        min-height: unset;
    }
}

@media screen and (min-width: 600px) {
    .home-hero {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
        min-height: unset;
    }
}

@media screen and (min-width: 900px) {
    .home-hero {
        row-gap: 1rem;
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
}

.home-hero>hgroup {
    display: grid;
    grid-column: 1/span 2;
    grid-row: 1/span 2;
    grid-template-columns: subgrid;
    grid-template-rows: auto;
}

@media screen and (min-width: 900px) {
    .home-hero>hgroup {
        grid-column-end: span 12;
        grid-row-end: span 6
    }
}

.home-hero__title {
    position: relative;
    z-index: -1;
    display: grid;
    grid-column: inherit;
    grid-row: 1/span 5;
    grid-template-columns: inherit;
    grid-template-rows: inherit;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.home-hero__title .segment .word {
    display: inline-block
}

@media screen and (min-width: 600px) {
    .home-hero__title .segment .char {
        display: inline-block
    }
}

.home-hero__title .segment--first {
    font-family: "League", sans-serif;
    font-size: 37.6cqmin;
    font-weight: 400;
    line-height: .72;
    grid-column: 1 / -1;
    grid-row: 1 / span 5;
    width: 100%;
    height: .74em;
    transform-origin: 0 100%;
    white-space: nowrap;
    text-transform: uppercase;
    line-break: unset;
    text-align: center;
    clip-path: polygon(0% -2%, 104% -2%, 104% 102%, 0% 102%);
}

@media screen and (max-width: 599px) {
    .home-hero__title .segment--first {
        font-size: clamp(2rem, -0.4412rem + 24vw, 24rem);
        width: max-content;
        text-align: center;
    }
}

@media screen and (min-width: 600px) {
    .home-hero__title .segment--first {
        font-size: clamp(1rem, -0.4412rem + 24vw, 27rem);
        line-height: .75;
        grid-column-end: span 2;
        grid-row: 1;
        width: max-content;
        height: unset;
        transform: unset;
        white-space: nowrap;
    }
}

@media screen and (min-width: 900px) {
    .home-hero__title .segment--first {
        font-size: clamp(10rem, -0.4412rem + 24vw, 24.375rem);
        grid-column-end: span 12;
        width: max-content;
    }
}

@media screen and (min-width: 1512px) {
    .home-hero__title .segment--first {
        font-size: 24vw
    }
}

.home-hero__title .segment--first .char {
    clip-path: polygon(0% 0%, 100% 0%, 100% 102%, 0% 102%)
}

.home-hero__title .segment--third {
    font-family: "Instrument", serif;
    font-size: 17.5cqmin;
    font-weight: normal;
    font-style: italic;
    line-height: .78;
    grid-column: 1 / -1;
    grid-row: 4;
    width: max-content;
    height: auto;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: center;

}

@media screen and (max-width: 599px) {
    .home-hero__title .segment--third {
        font-size: clamp(1rem, -0.44rem + 10.2vw, 23rem);
        width: max-content;
        text-align: center;
    }
}

@media screen and (min-width: 600px) {
    .home-hero__title .segment--third {
        font-size: clamp(1rem, -0.4412rem + 9.8vw, 27rem);
        line-height: .75;
        grid-column-end: span 2;
        grid-row: 3;
        width: max-content;
        height: unset;
        transform: unset;
        white-space: nowrap;
    }
}

@media screen and (min-width: 900px) {
    .home-hero__title .segment--third {
        font-size: clamp(3rem, -0.4412rem + 9.6vw, 24.375rem);
        grid-column-end: span 12;
        width: max-content;
    }
}

@media screen and (min-width: 1512px) {
    .home-hero__title .segment--third {
        font-size: 9.2vw;
    }
}

.home-hero__title .segment--third .char {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)
}