/* Root Colors */
:root {
    --border-color: #DE9B72;
}

/* FRAME WRAPPER */
.border-frame {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px; /* outer spacing */
    border: 2px solid var(--border-color); /* outer border */
    margin: 2em auto;
    width: 90%;
    max-width: 1200px;
    height: auto;
    box-sizing: border-box;
}

/* Nested Borders */
.border-frame::before,
.border-frame::after {
    content: "";
    position: absolute;
    inset: 6px; /* inner padding */
    border: 6px solid var(--border-color);
    pointer-events: none;
}

.border-frame::after {
    inset: 12px;
    border-width: 2px;
}

/* CONTENT INSIDE FRAME */
.border-content {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;
}

/* CORNERS */
.border-corner {
    position: absolute;
    width: 4em;
    z-index: 3;
}

.border-corner-left-top {
    top: 0;
    left: 0;
}

.border-corner-right-top {
    top: 0;
    right: 0;
    transform: scaleX(-1);
}

.border-corner-right-bottom {
    bottom: 0;
    right: 0;
    transform: scale(-1);
}

.border-corner-left-bottom {
    bottom: 0;
    left: 0;
    transform: scaleY(-1);
}

/* VERTICAL CENTER DECORATIONS */
.border-vertical {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 20em;
    z-index: 2;
}

.border-vertical-top {
    top: 0;
}

.border-vertical-bottom {
    bottom: 0;
    transform: translateX(-50%) scaleY(-1);
}

/* RESPONSIVE */
@media (min-width: 768px) {
    .border-corner { width: 4.5em; }
    .border-vertical { width: 25em; }
}

@media (min-width: 992px) {
    .border-corner { width: 5em; }
    .border-vertical { width: 30em; }
}

@media (min-width: 1200px) {
    .border-corner { width: 6em; }
    .border-vertical { width: 35em; }
}
#middle-new {
  border-top: 3px solid var(--temple-gold);
  border-bottom: 3px solid var(--temple-gold);
  border-left: 6px solid var(--temple-gold);
  border-right: 6px solid var(--temple-gold);
}

/* Mobile styles */
@media (max-width: 768px) {
  #middle-new {
    border: 6px solid var(--temple-gold); /* All sides 6px */
  }
}