:root {
    --content-title: 3.2rem;
    --nagykep-gap: 2rem;
    --kiskep-gap: 1rem;
    --kiskep-margin: 3rem;
    --tulajdonsag-margin: 2rem;
    --tulajdonsag-font-size: 1.4rem;
    --hr-margin-x: 3rem;
    --hr-margin-y: 3rem;
}

#content-title h1 {
	font-family: var(--header-font);
	font-weight: 700;
	font-size: var(--content-title);
	line-height: 1.3;
	color: var(--c-mid);
	text-align: center;
    text-wrap: balance;
}

@media (max-width: 800px) {
    #content-title {
        --content-title: 2.8rem;
    }
    .rozsak-doboz {
        --nagykep-gap: 1rem;
        --kiskep-gap: .5rem;
        --kiskep-margin: 2rem;
        --tulajdonsag-font-size: 1rem;
        --tulajdonsag-margin: 1rem;
        --hr-margin-x: 2rem;
        --hr-margin-y: 2rem;
    }
}

@media (max-width: 480px) {
    #content-title {
        --content-title: 2rem;
    }
    .rozsak-doboz {
        --kiskep-margin: 1rem;
        --hr-margin-x: 1rem;
        --hr-margin-y: 1.5rem;
    }
}

@media (max-width: 360px) {
    #content-title {
        --content-title: 1.6rem;
    }
    .rozsak-doboz {
        --kiskep-margin: .8rem;
        --hr-margin-x: .8rem;
        --hr-margin-y: 1.2rem;
    }
}

.rozsak-doboz {
    margin: 1rem auto;
    padding: 0 2rem;
    /* max-width: 760px; */
}

.rozsak-doboz-alcim {
    text-align: center;
    margin: 0 0 2rem;
}

.rozsak-doboz-cim-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
}

.rozsak-doboz-cim-grid > div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin: 0 var(--tulajdonsag-margin);
    font-size:var(--tulajdonsag-font-size);
}

.rozsak-doboz-cim-grid > div > div {
}

@media (max-width: 800px) {
    .rozsak-doboz-cim-grid > div {
        --tulajdonsag-font-size: 1rem;
        --tulajdonsag-margin: 1rem;
    }
}

@media (max-width: 640px) {
    .rozsak-doboz-cim-grid > div {
        display: block;
        text-align: center;
        --tulajdonsag-font-size: 1rem;
        --tulajdonsag-margin: 0;
    }
    .rozsak-doboz-cim-grid > div > div {
        display: inline;
    }
    .rozsak-doboz-cim-grid > div > div:nth-child(1):after {
        display: inline-block;
        content: "";
        width: 1ch;
    }
}

.rozsak-doboz-cim-grid > div > div:nth-child(1) {
    text-align: left;
    color: var(--c-alt);
}

.rozsak-doboz-cim-grid > div > div:nth-child(2) {
    text-align: right;
    color: var(--c-alt);
}

.rozsak-doboz-kep-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--nagykep-gap);
    margin-bottom: 1rem;
}

.rozsak-doboz-kep-grid > a {
    display: block;
    margin-bottom: 1rem;
}

.rozsak-doboz-kep-grid > a > img {
    object-fit: cover;
    width: 100%;
    border-radius: 5%;
}

.rozsak-doboz-kiskepek {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--kiskep-gap);
    margin: 0 var(--kiskep-margin) 2rem;
}

.rozsak-doboz-kiskepek > a {
    display: block;
}


.rozsak-doboz-kiskepek > a > img {
    max-width: 100%;
    border-radius: 10%;
}

.rozsak-doboz > hr {
    margin: var(--hr-margin-y) var(--hr-margin-x);
}