@font-face {
  font-family: "Gellix";
  src: url("./Gellix-SemiBold.otf");
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Libre Baskerville";
  src: url("./LibreBaskerville-Regular.ttf");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Libre Baskerville";
  src: url("./LibreBaskerville-Bold.ttf");
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}

:root {
  --color-black: #000000;
  --color-red: #ea4949;
}

body {
  margin: 0;
  box-sizing: border-box;
  font-family: "Gellix";
  padding: 20px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  @media (width >= 1024px) {
    padding: 44px;
  }
}

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

iframe {
  width: 100%;
  height: 100%;
}

.text-link {
  position: relative;
  white-space: nowrap;
}

.text-link::before {
  content: "";
  transform-origin: 100% 50%;
  transform: scale3d(0, 1, 1);
  transition: transform 0.3s;
  position: absolute;
  width: 100%;
  height: 1px;
  top: 100%;
  left: 0;
  background-color: var(--color-red);
  pointer-events: none;
}

.text-link:hover::before {
  transform-origin: 0% 50%;
  transform: scale3d(1, 1, 1);
}

.bold {
  font-weight: bold;
}

h1 {
  font-size: 40px;
  line-height: 42px;
  margin-bottom: 20px;
  
  @media (width >= 1024px) {
    font-size: 50px;
    line-height: 1;
  }
}

p {
  font-family: "Libre Baskerville";
  font-size: 15px;
  line-height: 30px;
  margin: 0;
}

/* Header */
header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 40px;
  margin-bottom: 10dvh;
  
  @media (width >= 1024px) {
    margin-bottom: 20dvh;
  }

  a {
  color: var(--color-red);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 15px;
  line-height: 22px;
  } 
}

/* Main */

.content__text {
  margin-bottom: 56px;

  @media (width >= 1024px) {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: end;
  }

  h1 {
    text-wrap: balance;
    grid-column: span 6;
    margin: 0;
  }

  p {
    grid-column: 10 / span 3;
  }
}

.iframe-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
}