1. Change the border-radius of a file card

    .OcuDarcula .card__wrapper,
    .OcuLight .card__wrapper {
      border-radius: 0px;
    }

  2. Change a corner of a file card

    .OcuDarcula .card__wrapper,
    .OcuLight .card__wrapper {
      border-top-left-radius:     5px;
      border-top-right-radius:    10px;
      border-bottom-right-radius: 0px;
      border-bottom-left-radius:  5px;
    }

  3. Change the background color of a file card

    .OcuDarcula .card__wrapper,
    .OcuLight .card__wrapper {
      background: red;
    }

  4. Remove the title of a file card

    .card .card__header__title {
      display: none;
    }

  5. Remove the line under the title of a file card

    .card .card__body__tabs__title {
      border: none;
    }

  6. Remove the tabs when there’s only one tab present

    .card__body__tabs__title:first-child:nth-last-child(1) {
        display: none;
    }

  7. Change the font of the body text

    /* create a font-family */
    @font-face {
        font-family: "myCustomFont";
        src: url('url-to-font.otf');
    }
    
    .card__body__content__container__text  {
      font-family: "myCustomFont";
      font-size: 42px;
      color: red;
    }

  8. Change the font of the title

    /* create a font-family */
    @font-face {
        font-family: "myCustomFont";
        src: url('url-to-font.otf');
    }
    
    .card .card__wrapper .card__header .card__header__title {
      font-family: "myCustomFont";
      font-size: 42px;
      color: red;
    }

  9. Add styling to a specific file card based on its ID

    .card--4 {
      // add styling here
    }

  10. Enlarging an asset to half the size of a file card (TEMPLATE)

    .OcuDarcula .page.page--dl .dl__card,
    .OcuLight .page.page--dl .dl__card {
        background: rgba(10, 25, 64, 0.36);
    }
    .OcuDarcula .card .card__wrapper,
    .OcuLight .card .card__wrapper {
        width: 87%;
        height: 82.4%;
        border-radius: 0;
        padding: 1.5% 3%;
    }
    .card .card__body {
        height: 82%;
    }
    .card__close {
        z-index: 2;
    }
    .card .card__wrapper .card__header {
        position: absolute;
        width: 45%;
    }
    .card .card__wrapper .card__header .card__header__title {
        text-align: left;
    }
    .card .card__header__sub {
        text-align: left;
    }
    
    .card .card__wrapper .card__body__tabs {
        position: absolute;
        width: 45%;
        top: 20%;
    }
    .card__wrapper .card__body__tabs .card__body__tabs {
        border-bottom: none;
    }
    .card__wrapper .card__body__content {
        width: 100%;
        height: 100%;
        margin-top: 12%;
        padding: 4% 0;
    }
    
    .card .card__body__content__container {
        margin: 1% 0;
    }
    .card__wrapper .card__body__content .card__body__content__container__text {
        width: 96%;
        font-size: 1em;
    }
    .card__wrapper .card__body__content .card__body__content__media {
        position: absolute;
        top: 0;
        left: initial;
        right: 0;
        width: 50%;
        transform: none;
        background: lightgray;
        margin: 0 0;
    }
    .card__body__content__media .media .media__element{
        object-fit:cover;
    }
    
    .card__body__content__media .media__enlarge.button {
        left: 2%;
        right: initial;
    }

  11. Make asset of a file card full screen (template)

    .dl__card {
        z-index: 10;
    }
    .OcuDarcula .page.page--im .im__card,
    .OcuLight .page.page--im .im__card,
    .OcuDarcula .page.page--dl .dl__card,
    .OcuLight .page.page--dl .dl__card {
        background: transparent;
    }
    .OcuDarcula .card .card__wrapper,
    .OcuLight .card .card__wrapper {
        width: 100%;
        height: 100%;
        border-radius: 0;
        padding: 1.5% 10px;
        background: rgb(246, 246, 246);
        
    }
    .card .card__wrapper .card__header {
        position: relative;
        left: 51%;
        width: 45%;
        height: 10%;
        max-height: 10%;
        overflow: hidden;
    }
    .card .card__wrapper .card__header .card__header__title {
        text-align: left;
        color: black;
        text-transform: uppercase;
    }
    .card .card__header__sub {
        text-align: left;
    }
    .card .card__body {
        height: 90%;
    }
    .card .card__close {
        z-index: 10;
        background: red;
        width: 70px;
        height: 70px;
        top: 10px;
        right: 10px;
        fill: black !important;
    }
    .card .card__close svg {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 34px;
        height: 34px;
        transform: translate(-50%, -50%);
    }
    .card .card__wrapper .card__body__tabs {
        position: relative;
        width: 45%;
        left: 51%;
    }
    .card__wrapper .card__body__tabs .card__body__tabs {
        border-bottom: none;
    }
    .card .card__body__tabs__title:first-child:nth-last-child(1) span {
        display: none;
    }
    .card__wrapper .card__body__content {
        width: 100%;
        height: 88%;
        padding: 0 0;
    }
    
    .card .card__body__content__container {
        margin: 1% 0;
        float: right;
        width: 48%;
    }
    .card__wrapper .card__body__content .card__body__content__container__text {
        width: 92%;
        font-size: 1em;
    }
    .card__wrapper .card__body__content .card__body__content__media {
        position: absolute;
        top: 0;
        left: 0;
        right: initial;
        width: 100%;
        transform: none;
        background: lightgray;
        margin: 0 0;
    }
    .card__body__content__media .media .media__element{
        object-fit:cover;
    }

  12. Make title in application visible on file card

    .menu--left.menu--top {
        z-index: 3;
    }
    
    .menu--center.menu--top {
        z-index: 3;
    }
    
    .menu--right.menu--top {
        z-index: 3;
    }

  13. Change the color of the arrows in the asset swiper:
    Copy the text between the quotes and change fill%3D'%23000000' to fill%3D'%230082B4'
    The %23 is replacing the # and the other numbers are the same as your hex code: #0082B4 = %230082B4

    .application--4402 .swiper-button-next {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%230082B4'%2F%3E%3C%2Fsvg%3E") !important;
    }
    
    .application--4402 .swiper-button-prev {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%230082B4'%2F%3E%3C%2Fsvg%3E") !important;
    }