.front-image-main-container {
  width: 100%;
  height: max(30vw, 300px);
  position: relative;
  
  display:flex;
  justify-content:center;
  align-items:center;
}

.front-image {
  	object-fit: fill;
    object-position: 50% 50%;
  
    width:max(100%, 600px);
    top: 0;
    left: 0;
	
  position: fixed;
  z-index: -1;
}

.front-image-container {
    width: 80%;
    overflow: hidden;
}

.front-image-text {
    animation: moveInSine 2s ease-in-out;
    color: white;

    font-size: max(6vw, 40px);
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    font-weight: 900;
}

.media {
    width: 100%;
    text-align: center;

    display: flex;
    justify-content:space-evenly;
    flex-wrap: wrap;
    gap: 20px;

    margin-bottom:50px
}

.media li {
    list-style: none;
    height: 80px;
}

.media-link {
    height: 50px;
    animation: mediahoverDec 0.2s forwards;
}

.media-link:hover {
    animation: mediahoverInc 0.2s forwards;
}

.inactive {
  pointer-events: none !important;
  cursor: default !important;
  opacity: 0.6;
}


.titleblock {
    padding: 5px;
    text-align: center;
}

@keyframes mediahoverInc {
    from {
        height: 50px; 
    }
    to {
        height: 70px;
    }
}

@keyframes mediahoverDec {
    from {
        height: 70px; 
    }
    to {
        height: 50px;
    }
}

@keyframes moveInSine {
    0% {
        opacity: 0;
        transform: translateY(110%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}