html,
body {
  height: 100%;
  margin: 0;
  background-color: #212529;
}

body,
a {
  font-family: 'Lateef', serif;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: underline;
  color: #212529;
}

h1 {
  margin: 0;
  padding: 0;
  font: inherit;
}

.bgimg-1, .bgimg-2, .bgimg-3 {
  position: relative;
  opacity: 1;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}

.bgimg-1 {
  background-image: var(--main-image);
  height: 100%;

}

.main-image-link {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 1;
  background-image: none !important;
}

.caption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #212529;
  z-index: 2;
}

.caption .border {
  display: inline-block;
  background-color: #e6b63e;
  color: transparent;
  padding: 0 16px;
  font-size: 44px;
  letter-spacing: 0.36px;
}

a,
a:hover,
a:focus,
a:active {
  text-decoration: none !important;
}
.enter-link {
  display: inline-grid;
  background-image: none !important;
}

.default-text,
.hover-text {
  grid-area: 1 / 1;
  justify-self: center;
  width: max-content;
  text-align: center;

  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 100% 50%;
  background-size: 0 2px;
  transition: background-size 0.3s cubic-bezier(0.4, 1, 0.8, 1);
}

.hover-text {
  visibility: hidden;
}

@media (hover: hover) and (pointer: fine) {
  .enter-link:hover .default-text {
    visibility: hidden;
  }

  .enter-link:hover .hover-text {
    visibility: visible;
  }

  .enter-link:hover .default-text,
  .enter-link:hover .hover-text {
    background-size: 100% 2px;
    animation: lineKick 0.18s linear;
  }
}

@media (hover: hover) and (pointer: fine) {
  .enter-link:hover .default-text {
    visibility: hidden;
  }

  .enter-link:hover .hover-text {
    visibility: visible;
  }
}


a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 100% 50%;
  background-size: 0 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.3s cubic-bezier(0.4, 1, 0.8, 1);
}

@keyframes lineKick {
  0%   { background-position: 0 50%; }
  33%  { background-position: 2px calc(50% - 2px); }
  66%  { background-position: -1px calc(50% + 1px); }
  100% { background-position: 0 50%; }
}




@media (hover: hover) and (pointer: fine) {
  a:hover {
    background-size: 100% 2px;
    animation: lineKick 0.18s linear;
  }
}

@media (hover: none) and (pointer: coarse) {
  a {
    transition: none;
  }

  a:active {
    background-position: 0 50%;
    background-size: 100% 2px;
    animation: none;
  }
}

@media (max-width: 600px) {

  .bgimg-1, .bgimg-2, .bgimg-3 {
    position: relative;
    opacity: 1;
    background-position: right 48.5% bottom 50%;


    background-repeat: no-repeat;
    background-size:cover;

  }

}