NOTES.txt

/* Clip Path Direction: Top left, top right, bottom left, bottom right */

clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);

/* Call the created animation */
animation-name: moveInLeft;

/* Duration of animation */
animation-duration: 1s;

/* Repeat 3 times */
/* animation-iteration-count: 3; */

animation-timing-function: ease-out;

/* Wait 3 secs before the animation starts */
/* animation-delay: 3s; */

/* Short hand */
animation: moveInRight 1s ease-out;

@keyframes moveInBottom {
  /* This styles applies before the animation starts simply by using the animation-fill-mode property and set it to backwards */
  0% {
    opacity: 0;
    transform: translateY(3rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  //perspective property defines how far the object is away from the user. So, a lower value will result in a more intensive 3D effect than a higher value.
  //perspective has to be on the parent element
  perspective: 150rem;
  -moz-perspective: 150rem;
  position: relative;

  //All the elements are on position absolute and so they're also taken out of the natural flow. The cards out of their natural flow and therefore the parent collapsed and lost its height. So what we have to do is actually specify the same height that we gave to card__side
  height: 50rem;

  &__side {
    background-color: orangered;
    font-size: 2rem;
    color: #fff;
    height: 50rem;
    transition: all 0.8s ease;
    //The box should be on top of one another. So to do that, simply position both card__side into absolute. Always remember to give the parent a relative position (.card). Since we gave them a absolute position (card__side), the elements do is that they basically start fitting to their width, so set a width.
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    //This is basically hides the back part of an element
    backface-visibility: hidden;

    &--front {
      background-color: orangered;
    }

    &--back {
      background-color: green;
      transform: rotateY(180deg);
    }
  }

  //When the card is hovered then the card side will be transformed
  //.card:hover .card__side
  &:hover &__side--front {
    transform: rotateY(180deg);
  }

  &:hover &__side--back {
    transform: rotateY(0);
  }
}

.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  opacity: 0.15;
  overflow: hidden;

  &__content {
    height: 100%;
    width: 100%;

    //Object-fit: cover is actually similar to background-size: cover. The object-fit cover does is that the element will fill the entire parent while still maintaining its aspect ration
    object-fit: cover;
  }
}

<div class="composition">
  <!-- 300w - the actual width of nat-1.jpg, 1000w is the actual width of nat-1-large.jpg -->

  <!-- To get the 20vw, inspect the img in chrome and get the width. For example the current width is 171 then divide it by 900 -->
  <img
    srcset="./img/nat-1.jpg 300w, ./img/nat-1-large.jpg 1000w"
    sizes="(max-width: 900px) 20vw, (max-width: 600px) 30vw, 300px"
    alt="Photo 1"
    class="composition__photo composition__photo--p1"
    src="./img/nat-1-large.jpg"
  />

  <img
    srcset="./img/nat-2.jpg 300w, ./img/nat-2-large.jpg 1000w"
    sizes="(max-width: 900px) 20vw, (max-width: 600px) 30vw, 300px"
    alt="Photo 2"
    class="composition__photo composition__photo--p2"
    src="./img/nat-2-large.jpg"
  />

  <img
    srcset="./img/nat-3.jpg 300w, ./img/nat-3-large.jpg 1000w"
    sizes="(max-width: 900px) 20vw, (max-width: 600px) 30vw, 300px"
    alt="Photo 3"
    class="composition__photo composition__photo--p3"
    src="./img/nat-3-large.jpg"
  />

  <!-- <img
    src="./img/nat-1-large.jpg"
    alt="Photo 1"
    class="composition__photo composition__photo--p1"
  /><img
    src="./img/nat-2-large.jpg"
    alt="Photo 2"
    class="composition__photo composition__photo--p2"
  /><img
    src="./img/nat-3-large.jpg"
    alt="Photo 3"
    class="composition__photo composition__photo--p3"
  /> -->
</div>