* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  font-size: 62.5%;
}

body {
  font-family: "Palanquin", sans-serif;
  background: #eff1ff;
  height: 100vh;
}

h1 {
  font-size: 4rem;
  color: #ffffff;
  font-weight: 400;
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
  -webkit-font-smoothing: antialiased;
}

h1,
span {
  font-family: "Staatliches", cursive;
  text-transform: uppercase;
  letter-spacing: 0.5rem;
  line-height: 3.4rem;
}

header {
  background: #8e9aaf;
  display: grid;
  place-items: center;
}

#logo-mobile {
  padding: 3.2rem 0;
}

#logo-desktop {
  display: none;
}

footer {
  display: none;
}

.title {
  background: #cbc0d3;
  margin-bottom: 2.9rem;
  padding: 0.8rem;
  width: 100%;
  text-align: center;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.8rem 3.2rem 6rem;
}

.text {
  font-family: "Palanquin", sans-serif;
  text-align: center;
  padding: 0 3.2rem;

  font-weight: normal;
  font-size: 1.4rem;
  line-height: 2.5rem;
  color: #23053a;
  -webkit-font-smoothing: antialiased;
}

.intro-desktop {
  display: none;
}

.cards {
  display: grid;
  gap: 3.2rem;
  margin-top: 5rem;
}

.cards .card {
  position: relative;
  height: fit-content;
  overflow: hidden;
  border-radius: 2rem;
}

.card {
  animation: FadeInTop 700ms 175ms backwards;
}

.card img {
  transition: all 400ms;
}

.card img:hover {
  transform: scale(1.3);
  border-radius: 2rem;
  cursor: pointer;
}

.card span {
  animation: FadeInBottom 700ms 175ms backwards;
}

.cards .card span {
  font-size: 2rem;
  color: #4a4e69;
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
  background: #feeafa;
  border-radius: 2rem;
  width: 11.2rem;
  text-align: center;
  letter-spacing: 0.2rem;
  z-index: 10;
}

.cards .card img {
  width: 100%;
  border-radius: 2rem;
}

.cards .card:nth-child(1) {
  animation-delay: 200ms;
}

.cards .card:nth-child(2) {
  animation-delay: 300ms;
}

.cards .card:nth-child(3) {
  animation-delay: 400ms;
}

.cards .card:nth-child(4) {
  animation-delay: 500ms;
}

.cards .card:nth-child(5) {
  animation-delay: 600ms;
}

.cards .card:nth-child(6) {
  animation-delay: 700ms;
}

@keyframes FadeInTop {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes FadeInBottom {
  from {
    opacity: 0;
    transform: translateY(-2.5rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes SlideIn {
  from {
    opacity: 0;
    transform: translateX(-38rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes LogoRotate {
  from {
    transform: rotateY(360deg);
  }
}

@media (min-width: 900px) {
  .container {
    display: flex;
  }

  header {
    width: 37.7rem;
    height: 100vh;
    position: fixed;
    display: flex;
    flex-direction: column;
    animation: SlideIn 700ms 350ms backwards;
  }

  .title {
    margin-bottom: 3.2rem;
  }

  .text {
    display: none;
  }

  .intro-desktop {
    display: block;
    color: #ffffff;
    font-size: 1.8rem;
    line-height: 1.5;
    width: 28rem;
    text-align: center;
  }

  .cards {
    margin-left: 37.7rem;
    grid-template-areas:
      "A B"
      "C B"
      "C D"
      "E F";
  }
  .cards .card:nth-child(1) {
    grid-area: A;
  }

  .cards .card:nth-child(2) {
    grid-area: B;
  }

  .cards .card:nth-child(3) {
    grid-area: D;
  }

  .cards .card:nth-child(4) {
    grid-area: C;
  }

  .cards .card:nth-child(5) {
    grid-area: E;
  }

  .cards .card:nth-child(6) {
    grid-area: F;
  }

  #logo-mobile {
    display: none;
  }

  #logo-desktop {
    display: block;
    padding: 3.2rem 0;
    animation: LogoRotate 10s 2s infinite;
  }

  footer {
    padding-top: 5rem;
    margin-left: 37.7rem;
    display: block;
  }

  footer p {
    font-size: 1.4rem;
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    color: #4a4e69;
    line-height: 28px;
  }

  footer p a {
    font-weight: 700;
    text-decoration: none;
    color: #4a4e69;
  }
}

@media (min-width: 1440px) {
  .cards {
    grid-template-areas:
      "A B C"
      "D B E"
      "D F E";
  }

  .cards .card:nth-child(1) {
    grid-area: A;
  }

  .cards .card:nth-child(2) {
    grid-area: B;
  }

  .cards .card:nth-child(3) {
    grid-area: C;
  }

  .cards .card:nth-child(4) {
    grid-area: D;
  }

  .cards .card:nth-child(5) {
    grid-area: F;
  }

  .cards .card:nth-child(6) {
    grid-area: E;
  }
}

/***************************************************
 * Generated by SVG Artista on 12/7/2022, 6:38:47 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

@-webkit-keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

@keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

.svg-elem-1 {
  -webkit-animation: animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715)
    0.8s both;
  animation: animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s
    both;
}

@-webkit-keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

@keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

.svg-elem-2 {
  -webkit-animation: animate-svg-fill-2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715)
    0.9s both;
  animation: animate-svg-fill-2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s
    both;
}

@-webkit-keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(242, 242, 242);
  }
}

@keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(242, 242, 242);
  }
}

.svg-elem-3 {
  -webkit-animation: animate-svg-fill-3 0.7s cubic-bezier(0.47, 0, 0.745, 0.715)
    1s both;
  animation: animate-svg-fill-3 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
}

@-webkit-keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

@keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

.svg-elem-4 {
  -webkit-animation: animate-svg-fill-4 0.7s cubic-bezier(0.47, 0, 0.745, 0.715)
    1.1s both;
  animation: animate-svg-fill-4 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s
    both;
}

@-webkit-keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(228, 228, 228);
  }
}

@keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(228, 228, 228);
  }
}

.svg-elem-5 {
  -webkit-animation: animate-svg-fill-5 0.7s cubic-bezier(0.47, 0, 0.745, 0.715)
    1.2000000000000002s both;
  animation: animate-svg-fill-5 0.7s cubic-bezier(0.47, 0, 0.745, 0.715)
    1.2000000000000002s both;
}

@-webkit-keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(242, 242, 242);
  }
}

@keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(242, 242, 242);
  }
}

.svg-elem-6 {
  -webkit-animation: animate-svg-fill-6 0.7s cubic-bezier(0.47, 0, 0.745, 0.715)
    1.3s both;
  animation: animate-svg-fill-6 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s
    both;
}

@-webkit-keyframes animate-svg-fill-7 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(228, 228, 228);
  }
}

@keyframes animate-svg-fill-7 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(228, 228, 228);
  }
}

.svg-elem-7 {
  -webkit-animation: animate-svg-fill-7 0.7s cubic-bezier(0.47, 0, 0.745, 0.715)
    1.4000000000000001s both;
  animation: animate-svg-fill-7 0.7s cubic-bezier(0.47, 0, 0.745, 0.715)
    1.4000000000000001s both;
}

@-webkit-keyframes animate-svg-fill-8 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(242, 242, 242);
  }
}

@keyframes animate-svg-fill-8 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(242, 242, 242);
  }
}

.svg-elem-8 {
  -webkit-animation: animate-svg-fill-8 0.7s cubic-bezier(0.47, 0, 0.745, 0.715)
    1.5s both;
  animation: animate-svg-fill-8 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s
    both;
}

@-webkit-keyframes animate-svg-fill-9 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(242, 242, 242);
  }
}

@keyframes animate-svg-fill-9 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(242, 242, 242);
  }
}

.svg-elem-9 {
  -webkit-animation: animate-svg-fill-9 0.7s cubic-bezier(0.47, 0, 0.745, 0.715)
    1.6s both;
  animation: animate-svg-fill-9 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s
    both;
}

@-webkit-keyframes animate-svg-fill-10 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(221, 190, 169);
  }
}

@keyframes animate-svg-fill-10 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(221, 190, 169);
  }
}

.svg-elem-10 {
  -webkit-animation: animate-svg-fill-10 0.7s
    cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s both;
  animation: animate-svg-fill-10 0.7s cubic-bezier(0.47, 0, 0.745, 0.715)
    1.7000000000000002s both;
}

@-webkit-keyframes animate-svg-fill-11 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

@keyframes animate-svg-fill-11 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-11 {
  -webkit-animation: animate-svg-fill-11 0.7s
    cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s both;
  animation: animate-svg-fill-11 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s
    both;
}

@-webkit-keyframes animate-svg-fill-12 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

@keyframes animate-svg-fill-12 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-12 {
  -webkit-animation: animate-svg-fill-12 0.7s
    cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s both;
  animation: animate-svg-fill-12 0.7s cubic-bezier(0.47, 0, 0.745, 0.715)
    1.9000000000000001s both;
}

@-webkit-keyframes animate-svg-fill-13 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(222, 170, 255);
  }
}

@keyframes animate-svg-fill-13 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(222, 170, 255);
  }
}

.svg-elem-13 {
  -webkit-animation: animate-svg-fill-13 0.7s
    cubic-bezier(0.47, 0, 0.745, 0.715) 2s both;
  animation: animate-svg-fill-13 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s
    both;
}

@-webkit-keyframes animate-svg-fill-14 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(222, 170, 255);
  }
}

@keyframes animate-svg-fill-14 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(222, 170, 255);
  }
}

.svg-elem-14 {
  -webkit-animation: animate-svg-fill-14 0.7s
    cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s both;
  animation: animate-svg-fill-14 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s
    both;
}

@-webkit-keyframes animate-svg-fill-15 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(222, 170, 255);
  }
}

@keyframes animate-svg-fill-15 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(222, 170, 255);
  }
}

.svg-elem-15 {
  -webkit-animation: animate-svg-fill-15 0.7s
    cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s both;
  animation: animate-svg-fill-15 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s
    both;
}

@-webkit-keyframes animate-svg-fill-16 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

@keyframes animate-svg-fill-16 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-16 {
  -webkit-animation: animate-svg-fill-16 0.7s
    cubic-bezier(0.47, 0, 0.745, 0.715) 2.3s both;
  animation: animate-svg-fill-16 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.3s
    both;
}

@-webkit-keyframes animate-svg-fill-17 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

@keyframes animate-svg-fill-17 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-17 {
  -webkit-animation: animate-svg-fill-17 0.7s
    cubic-bezier(0.47, 0, 0.745, 0.715) 2.4000000000000004s both;
  animation: animate-svg-fill-17 0.7s cubic-bezier(0.47, 0, 0.745, 0.715)
    2.4000000000000004s both;
}

@-webkit-keyframes animate-svg-fill-18 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(125, 26, 171);
  }
}

@keyframes animate-svg-fill-18 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(125, 26, 171);
  }
}

.svg-elem-18 {
  -webkit-animation: animate-svg-fill-18 0.7s
    cubic-bezier(0.47, 0, 0.745, 0.715) 2.5s both;
  animation: animate-svg-fill-18 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.5s
    both;
}

@-webkit-keyframes animate-svg-fill-19 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(125, 26, 171);
  }
}

@keyframes animate-svg-fill-19 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(125, 26, 171);
  }
}

.svg-elem-19 {
  -webkit-animation: animate-svg-fill-19 0.7s
    cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s both;
  animation: animate-svg-fill-19 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s
    both;
}

@-webkit-keyframes animate-svg-fill-20 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(125, 26, 171);
  }
}

@keyframes animate-svg-fill-20 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(125, 26, 171);
  }
}

.svg-elem-20 {
  -webkit-animation: animate-svg-fill-20 0.7s
    cubic-bezier(0.47, 0, 0.745, 0.715) 2.7s both;
  animation: animate-svg-fill-20 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.7s
    both;
}

@-webkit-keyframes animate-svg-fill-21 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(125, 26, 171);
  }
}

@keyframes animate-svg-fill-21 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(125, 26, 171);
  }
}

.svg-elem-21 {
  -webkit-animation: animate-svg-fill-21 0.7s
    cubic-bezier(0.47, 0, 0.745, 0.715) 2.8s both;
  animation: animate-svg-fill-21 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8s
    both;
}

@-webkit-keyframes animate-svg-fill-22 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(125, 26, 171);
  }
}

@keyframes animate-svg-fill-22 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(125, 26, 171);
  }
}

.svg-elem-22 {
  -webkit-animation: animate-svg-fill-22 0.7s
    cubic-bezier(0.47, 0, 0.745, 0.715) 2.9000000000000004s both;
  animation: animate-svg-fill-22 0.7s cubic-bezier(0.47, 0, 0.745, 0.715)
    2.9000000000000004s both;
}

@-webkit-keyframes animate-svg-fill-23 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(125, 26, 171);
  }
}

@keyframes animate-svg-fill-23 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(125, 26, 171);
  }
}

.svg-elem-23 {
  -webkit-animation: animate-svg-fill-23 0.7s
    cubic-bezier(0.47, 0, 0.745, 0.715) 3s both;
  animation: animate-svg-fill-23 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3s
    both;
}

@-webkit-keyframes animate-svg-fill-24 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(125, 26, 171);
  }
}

@keyframes animate-svg-fill-24 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(125, 26, 171);
  }
}

.svg-elem-24 {
  -webkit-animation: animate-svg-fill-24 0.7s
    cubic-bezier(0.47, 0, 0.745, 0.715) 3.1000000000000005s both;
  animation: animate-svg-fill-24 0.7s cubic-bezier(0.47, 0, 0.745, 0.715)
    3.1000000000000005s both;
}

@-webkit-keyframes animate-svg-fill-25 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(125, 26, 171);
  }
}

@keyframes animate-svg-fill-25 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(125, 26, 171);
  }
}

.svg-elem-25 {
  -webkit-animation: animate-svg-fill-25 0.7s
    cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s both;
  animation: animate-svg-fill-25 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s
    both;
}

@-webkit-keyframes animate-svg-fill-26 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(125, 26, 171);
  }
}

@keyframes animate-svg-fill-26 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(125, 26, 171);
  }
}

.svg-elem-26 {
  -webkit-animation: animate-svg-fill-26 0.7s
    cubic-bezier(0.47, 0, 0.745, 0.715) 3.3s both;
  animation: animate-svg-fill-26 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.3s
    both;
}

@-webkit-keyframes animate-svg-fill-27 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(222, 170, 255);
  }
}

@keyframes animate-svg-fill-27 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(222, 170, 255);
  }
}

.svg-elem-27 {
  -webkit-animation: animate-svg-fill-27 0.7s
    cubic-bezier(0.47, 0, 0.745, 0.715) 3.4000000000000004s both;
  animation: animate-svg-fill-27 0.7s cubic-bezier(0.47, 0, 0.745, 0.715)
    3.4000000000000004s both;
}

@-webkit-keyframes animate-svg-fill-28 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(222, 170, 255);
  }
}

@keyframes animate-svg-fill-28 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(222, 170, 255);
  }
}

.svg-elem-28 {
  -webkit-animation: animate-svg-fill-28 0.7s
    cubic-bezier(0.47, 0, 0.745, 0.715) 3.5s both;
  animation: animate-svg-fill-28 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.5s
    both;
}