:root {
  --mainFont: 'Roboto', sans-serif;
  --secondaryFont: 'Roboto Condensed', sans-serif;
  --primaryColor: #1B90FC;
  --white: white;
  --black: #202020;
}

body {
  font-family: var(--mainFont);
  margin: 0;
}

.wrapper {
  margin: auto;
}

p,
h1 {
  margin: 0;
}

.hero {
  background-color: var(--black);
}

.hero h1 {
  margin-block-start: 24px;
  font-family: var(--secondaryFont);
  color: white;
  font-size: 24px;
  font-weight: bold;
}

.hero p {
  color: white;
  font-family: var(--mainFont);
  margin-block-start: 8px;
  font-size: 14px;
  line-height: 24px;
}

.wrapper {
  background-color: white;
}

.hero-content {
  background-color: var(--black);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 80px), 0 100%);
}

img {
  max-inline-size: 100%;
  max-block-size: auto;
}

.card {
  block-size: 366px;
}

#loki-img {
  background-color: var(--black);
}

.card {
  padding: 24px;
}

button {
  inline-size: 100%;
  background-color: var(--primaryColor);
  block-size: 48px;
  border-radius: 50px;
  border: none;
  margin-block-start: 24px;
  color: var(--white);
  font-weight: bold;
}

@media (min-width: 768px) {
  .wrapper {
    max-inline-size: 768px;
  }

  .card {
    padding-block: 40px;
    padding-inline: 64px;
  }

  #logo {
    block-size: 80px;
  }

  .hero h1 {
    font-size: 40px;
  }

  .hero p {
    font-size: 16px;
    line-height: 24px;
  }
}

@media (min-width: 1366px) {
  .wrapper {
    max-inline-size: 1366px;
  }

  #loki-img {
    position: relative;
    inline-size: 100%;
  }

  .hero-content {
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 128px), 0 100%);
  }

  .card {
    position: absolute;
    block-size: 100%;
    inset-block-start: 0;
    background-color: var(--black);
    padding: 0;
    display: flex;
    align-items: center;
    inline-size: 50%;
    clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);
  }

  .card-content {
    inline-size: 412px;
    margin-inline-start: 83px;
  }

  #logo {
    height: 64px;
  }

  button {
    inline-size: auto;
    padding-inline: 32px;
    padding-block: 15px;
  }
}