body.login {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    font-size: .9375rem;
}
body.login,
body.login #login {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity));
}
body.login #login form {
    --tw-border-opacity: 1;
    border-color: rgb(0 0 0 / var(--tw-border-opacity));
    border-radius: 0;
    padding: 1rem;
}
@media (min-width: 768px) {
    body.login #login form {
        padding: 2rem;
    }
}
body.login #login form label {
    font-size: .8125rem;
    margin-bottom: .5rem;
}
body.login #login form input,
body.login #login form input[type=checkbox] {
    --tw-border-opacity: 1;
    border-color: rgb(0 0 0 / var(--tw-border-opacity));
    border-radius: 0;
    border-width: 1px;
}
body.login #login form input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    flex-shrink: 0;
    height: 1rem;
    margin: 0;
    transition-duration: .15s;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    width: 1rem;
}
body.login #login form input[type=checkbox]:checked {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
body.login #login form input[type=checkbox]:before {
    display: none;
}
body.login #login form #wp-submit {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity));
    border-color: rgb(0 0 0 / var(--tw-border-opacity));
    border-radius: 0;
    color: rgb(255 255 255 / var(--tw-text-opacity));
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.3;
    padding: .5rem 1rem;
    text-transform: uppercase;
    transition-duration: .15s;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
body.login #login form #wp-submit:focus,
body.login #login form #wp-submit:hover {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    color: rgb(0 0 0 / var(--tw-text-opacity));
    text-decoration-line: none;
}
body.login #login #login_error {
    --tw-border-opacity: 1;
    border-color: rgb(0 0 0 / var(--tw-border-opacity));
    font-size: .9375rem;
}
body.login #backtoblog,
body.login #nav {
    padding-left: 1rem;
    padding-right: 1rem;
}
@media (min-width: 768px) {
    body.login #backtoblog,
    body.login #nav {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}
body.login #backtoblog a,
body.login #nav a {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity));
}
body.login #backtoblog a:focus,
body.login #backtoblog a:hover,
body.login #nav a:focus,
body.login #nav a:hover {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity));
    text-decoration-line: underline;
}

/* New video block styles */
.video {
    text-align: left;
    padding: 20px;
}
.video__title {
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: bold;
}
.video__content {
    display: flex;
    flex-direction: column;
}
.video__media video {
    max-width: 100%;
    height: auto;
}
.video__caption {
    margin-top: 10px;
    color: #555;
}
.video__innerblocks {
    margin-top: 20px;
}

/* Landscape Format */
.video--landscape .video__media video {
    width: 100%;
    height: auto;
}

/* Portrait Format */
.video--portrait {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
}
.video--portrait .video__media {
    grid-column: 1;
    width: 100%;
}
.video--portrait .video__media video {
    width: 100%;
    height: auto;
    max-width: 300px; /* Limit width for portrait videos */
}
.video--portrait .video__content {
    grid-column: 2;
}



/* Video Repeater Grid */
.video-repeater__grid {
    display: grid;
    gap: 30px; /* Adjust gap between items for larger screens */
}

/* Dynamic Columns Based on Video Count */
.video-repeater__grid.grid-cols-1 {
    grid-template-columns: 1fr;
}
.video-repeater__grid.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}
.video-repeater__grid.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* Responsive Adjustments for Tablets */
@media (max-width: 1024px) {
    .video-repeater__grid {
        grid-template-columns: repeat(2, 1fr); /* Two columns for medium screens */
        gap: 20px;
    }
}

/* Single Column for Smaller Screens */
@media (max-width: 768px) {
    .video-repeater__grid {
        grid-template-columns: 1fr; /* One column for mobile screens */
        gap: 15px;
    }
}

/* Video Item Styling */
.video-item {
    text-align: center;
}

.video-item video {
    max-width: 100%;
    height: auto;
    border-radius: 8px; /* Optional rounded corners */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow for videos */
    transition: transform 0.3s ease-in-out; /* Smooth hover effect */
}

.video-item video:hover {
    transform: scale(1.05); /* Slight zoom effect on hover */
}

/* Caption Styling */
.video-caption {
    margin-top: 10px;
    font-size: 14px;
    color: #555;
    line-height: 1.4;
}

/* Title Styling */
.video-repeater__title {
    margin-bottom: 20px;
    font-size: 24px; /* Match the Video Block title size */
    font-weight: bold;
    text-align: left;
}

/* Consistent Padding for Blocks */
.video {
    padding: 20px;
}

.video-repeater {
    padding: 20px; /* Match Video Block padding */
}

/* Portrait Mode for Individual Videos in Repeater */
.video-repeater__grid .video--portrait video {
    max-width: 300px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Animation for Videos */
.video-item {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}